vraag over jquery

rodeto · **Joined:** Thu May 04, 2006 9:12 am **Posts:** 298

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:

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

<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 · **Posted:** Tue Mar 13, 2012 3:41 pm

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:

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:

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 · **Joined:** Thu May 04, 2006 9:12 am **Posts:** 298

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 · **Posted:** Tue Mar 13, 2012 4:23 pm

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 · **Posted:** Tue Mar 13, 2012 4:43 pm

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

grt.Rolf

rodeto · **Joined:** Thu May 04, 2006 9:12 am **Posts:** 298

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 · **Posted:** Tue Mar 13, 2012 6:10 pm

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

Rolf

arnoud · **Joined:** Sun Apr 19, 2009 9:33 am **Posts:** 1177

----------

rodeto · **Joined:** Thu May 04, 2006 9:12 am **Posts:** 298

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 · **Posted:** Tue Mar 13, 2012 7:31 pm

Ha, ik heb m!

Zo werkt ie:

Code:

<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 · **Joined:** Thu May 04, 2006 9:12 am **Posts:** 298

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:

<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 · **Posted:** Wed Mar 14, 2012 11:09 am

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 · **Joined:** Thu May 04, 2006 9:12 am **Posts:** 298

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 · **Posted:** Wed Mar 14, 2012 12:54 pm

Ik heb nu deze:

Code:

<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 · **Joined:** Thu May 04, 2006 9:12 am **Posts:** 298

Hallo Tim, dank voor je hulp.
Kijk maar even hoe het er nu bij staat: http://tinyurl.com/7kez4ns
werkt nog niet helemaal fijn.

vraag over jquery

Who is online