vraag over jquery

[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?

[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.

[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?

[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.

[Rolf]

Ik gebruik deze http://dev.cmsmadesimple.org/projects/contenttoggle
Zie bijvoorbeeld http://www.smakelijketenzonderzout.nl/links

grt.Rolf

[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.

[Rolf]

Wellicht zou je wel even onder de motorkap kunnen kijken hoe het daar is gemaakt

Rolf

[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.

[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>

[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

[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

[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

[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.

[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.

[Rolf]

@Rodeto,

Je hebt meerdere jQuery aanroepen in jouw template staan.
Dan gaat het fout...

grt. Rolf