Javascript Jquery one trigger to toggle multiple divs

Question

I have read a lot of the similar questions but I can't find my answer... With the following code I can toggle my chart on and off:

<h6 class="toggle-trigger"><a href="#">Chart 3</a></h6>
  <div id="Chartspace3" class="toggle-container"></div> 

What I would like to do is when "Chart 3" is clicked, the two following divs are shown like so:

<h6 class="toggle-trigger"><a href="#">Chart 3</a></h6>
  <div id="PassOptionSelection"  style="display: none; margin-top: 20px"> </div>
  <div id="Chartspace3" class="toggle-container"></div>

But it seems like only one of the divs can be toggled by the "toggle-trigger" link...

here is my JS:

$(".toggle-container").hide(); 
$(".toggle-trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("slow");
    return false;
}); 

[EDIT]

here is a bigger sample of my html:

<h6 class="toggle-trigger"><a href="#">Nombre d'Appels par Passerelle</a></h6>
<div class="toggle-container" id="Chartspace1" style="width: 800px; height: 300px; margin-bottom: 10px"></div>

<h6 class="toggle-trigger"><a href="#">Pourcentage d'Appels par Utilisation de Passerelle</a></h6>
 <div class="toggle-container" id="Chartspace2" style="width: 800px; height: 300px; margin-bottom: 10px"></div>

<h6 class="toggle-trigger"><a href="#">Classification des appels par types</a></h6>
<div id="PassOptionSelection"  style="display: none; margin-top: 20px"> </div>
<div id="Chartspace3" class="toggle-container"  style="width: 800px; height: 800px; margin-bottom: 10px;"></div> 

This works well except for the part where only the form will show on the third toggle link, the chart stays hidden...

Answer 1

What about something like?

$(".toggle-trigger").click(function(){ $(this).toggleClass("active").children("div").slideToggle("slow"); return false; });

Sorry...brain fart...the DIV tags are not children of the H6 tag. I apologize...I should have looked at your sample code more carefully.

$(".toggle-trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("slow").next().slideToggle("slow");
    return false;
}); 

may work but it is ugly. I think Jemaclus suggestion about enclosing the two DIV elements in a container DIV is a cleaner/better solution.

Answer 2

The easiest thing would be to wrap everything you want to show in a div, then hide and show that div, instead of hiding and showing the individual divs.

  <div id="trigger">Trigger</div>
  <div id="container">
      <div id="box1">Box 1</div>
      <div id="box2">Box 2</div>
  </div>

Then you can just hide or show the #container box, which would also hide/show Box 1 and Box 2.

Another easy option is to add a class to the divs that you want to be toggled (ie toggle-this), and then do something like:

  $(".toggle-trigger").click(function() {
    $('.toggle-this').toggle();
    return false;
  });

Yet another way (though I like it less because it's easier to break) would be to just get the next two divs:

   $(".toggle-trigger").click(function() {
    $(this).next('div').toggle().next('div').toggle();
    return false;
  });

The reason that's a bad idea, in my opinion, is that if you were to add or remove other divs, it would break and hide divs that you don't want to hide.

And finally, the most exact solution would be to explicitly hide/show those divs based on IDs, like so:

 $(".toggle-trigger").click(function() {
    $('#PassOptionSelection').toggle();
    $('#Chartspace3').toggle();
    return false;
  });

I suspect this last one is not an option, since you probably have multiple charts on the page with various IDs.

My suggestion is to go with one of my first two options.

Good luck.

Answer 3

I am a bit confused, but if i understand you correctly the div you want to show is not a child not of the .toggle-trigger that has been clicked. that is why next() will work but .find('div') will not. also, it may not be the immediate sibling of your element. you can use something like

$(this).toggleClass('active').next('.toggle-container').slideToggle('slow');