Page 1 of 2
vraag over jquery
Posted: Tue Mar 13, 2012 12:16 pm
by rodeto
Ik heb een eenvoudige expand/collapse box op een pagina staan die mbv jquery toch wel erg leuk oogt.
In de header heb ik staan
Code: Select all
<__script__ src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"> </__script>
<__script__ type="text/javascript">
jQuery(document).ready(function() {
jQuery(".shcontent").hide();
jQuery(".shtitle").click(function()
{
jQuery(this).next(".shcontent").slideToggle(500);
});
});
</__script>
en in de pagina op de juiste plekken
Code: Select all
<p class="shtitle">2012</p>
<div class="shcontent">overzicht van de portfolio 2012</div>
<p class="shtitle">2011</p>
<div class="shcontent">overzicht van de portfolio 2011</div>
Op zich werkt alles meer dan prima alleen als je klikt dan blijft het eerder geopende item opengeklapt staan. Weet iemand een manier om dit zo te te krijgen dat een open item zich sluit als een ander item opent?
Re: vraag over jquery
Posted: Tue Mar 13, 2012 3:41 pm
by timdebuurman
Hoi,
Ik moest ook even zoeken, maar heb het voor elkaar.
Eerst moet de div die geopend word een class meekrijgen, bijv. 'active'
Die voeg je hier toe:
Code: Select all
jQuery(this).next(".shcontent").slideToggle(500).addClass('active');
dan moet hij ook nog weten dat de div met de class 'active' ge-tooggled moet worden bij klikken.
Voeg deze dus ook toe, dan word het zo:
Code: Select all
jQuery(this).next(".shcontent, .active").slideToggle(500).addClass('active');
De code in mijn test is ietsje anders, dus ik ben benieuwd of het werkt.
Re: vraag over jquery
Posted: Tue Mar 13, 2012 4:00 pm
by rodeto
Hallo timdebuurman, dank voor je reactie. Helaas biedt dit bij mij niet de oplossing. Er wordt niets gesloten als ik een tweede blok open.
Ik kan ook de class='active' niet terugvinden in de bron. Zou dat in de bron zichtbaar moeten zijn of verwerkt jQuery dat op een andere manier?
Re: vraag over jquery
Posted: Tue Mar 13, 2012 4:23 pm
by timdebuurman
ik zie nu dat dat de oplossing niet is in jou geval.
Ik pas wel eens jquery toe in menu's, daarin werkt het wel.
Het zal wel te maken hebben met het toevoegen van een class en die dan laten dichtklappen.
Re: vraag over jquery
Posted: Tue Mar 13, 2012 4:43 pm
by Rolf
Re: vraag over jquery
Posted: Tue Mar 13, 2012 6:08 pm
by rodeto
Hallo Rolf,
Ik heb daar wel naar gekeken maar ben een beetje terughoudens daarin. De wijze waarop bijv. de css is toegevoegd vind ik erg omslachtig. Dank voor je tip.
Re: vraag over jquery
Posted: Tue Mar 13, 2012 6:10 pm
by Rolf
Wellicht zou je wel even onder de motorkap kunnen kijken hoe het daar is gemaakt
Rolf
Re: vraag over jquery
Posted: Tue Mar 13, 2012 6:40 pm
by rodeto
Het moet allemaal goed werkbaar zijn, niet alleen voor mij maar ook voor een editor die alleen maar met teksten bezig is en zich niet wil bemoeien met opmaak etc.
Wat ik nu heb is op zich heel eenvoudig en voor dit doel meer dan geschikt (
http://tinyurl.com/7kez4ns). Alleen zou ik het persoonlijk mooi vinden om een blok automatisch in te laten klappen als een ander blok geopend wordt. Vandaar mijn vraag of dat met een jQuery commando ook aan de bestaande code toegevoegd kan worden.
Re: vraag over jquery
Posted: Tue Mar 13, 2012 7:31 pm
by timdebuurman
Ha, ik heb m!
Zo werkt ie:
Code: Select all
<__script__ type="text/javascript">
jQuery(document).ready(function() {
jQuery(".shcontent").hide();
jQuery(".shtitle").click(function()
{
var x = $(this).attr("className");
var $item = $('div.toggle-item-' + x);
if (!$item.is(":visible")) $('div').hide(500);
jQuery(this).next(".shcontent").slideToggle(500);
});
});
</__script>
Re: vraag over jquery
Posted: Wed Mar 14, 2012 7:11 am
by rodeto
Dank aan tiomdebuurman!
maar helaas werkt deze code bij mij niet. Wat er gebeurt is dat de hele pagina verdwijnt naar de rechterbovenhoek en ook niet meer terugkomt.
Zou dat te maken kunnen hebben met een andere functie die ik al aan de code had toegevoegd?
Dit is de code die ik nu heb staan
Code: Select all
<__script__ type="text/javascript">
jQuery(document).ready(function() {
jQuery(".shcontent").hide();
jQuery(".shtitle").addClass('plus');
jQuery(".shtitle").click(function()
{
jQuery(this).toggleClass('plus').toggleClass('minus').next(".shcontent").slideToggle(500);
});
});
</__script>
groeten uit Beekbergen
Re: vraag over jquery
Posted: Wed Mar 14, 2012 11:09 am
by timdebuurman
lol, ik was (weer) te vroeg aan het juigen
HIj lek het wel te doen, omdat bij het klikken op een ander jaartal, de ene opende en de ander sluitte.
Alleen als je nog eens op het zelfde, geopende jaartal klikt, sluit deze en opend weer.
Ik heb mijn test even online gezet:
http://www.timdebuurman.nl/rodeto
Re: vraag over jquery
Posted: Wed Mar 14, 2012 11:26 am
by rodeto
Ik ben niet goed genoeg thuis in jQuery om uit te vogelen wat er nu precies misgaat bij mij. Zal ongetwijfeld iets te maken hebben met mijn iets aangepaste code.
Toch dank voor het meedenken
Re: vraag over jquery
Posted: Wed Mar 14, 2012 12:54 pm
by timdebuurman
Ik heb nu deze:
Code: Select all
<__script__ type="text/javascript">
jQuery(document).ready(function() {
jQuery(".shcontent").hide();
jQuery(".shtitle").click(function()
{
$('.active').slideUp(500).removeClass('active');
$(this).next('div.shcontent').slideDown(500).addClass('active');
});
});
</__script>
Enige wat dan niet goed is, is dat zodra er 1 geopend is, je deze niet kan sluiten door op diegene zelf te klikken. Verder lijkt het goed te werken.
Re: vraag over jquery
Posted: Wed Mar 14, 2012 2:06 pm
by rodeto
Hallo Tim, dank voor je hulp.
Kijk maar even hoe het er nu bij staat:
http://tinyurl.com/7kez4ns
werkt nog niet helemaal fijn.
Re: vraag over jquery
Posted: Wed Mar 14, 2012 3:17 pm
by Rolf
@Rodeto,
Je hebt meerdere jQuery aanroepen in jouw template staan.
Dan gaat het fout...
grt. Rolf