Databases
StackOverflow2013
Postsdbo
POJavascript Jquery one trigger to toggle multiple divs
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript Jquery one trigger to toggle multiple divs
    text
    copied!<p>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:</p> <pre><code>&lt;h6 class="toggle-trigger"&gt;&lt;a href="#"&gt;Chart 3&lt;/a&gt;&lt;/h6&gt; &lt;div id="Chartspace3" class="toggle-container"&gt;&lt;/div&gt; </code></pre> <p>What I would like to do is when "Chart 3" is clicked, the two following divs are shown like so:</p> <pre><code>&lt;h6 class="toggle-trigger"&gt;&lt;a href="#"&gt;Chart 3&lt;/a&gt;&lt;/h6&gt; &lt;div id="PassOptionSelection" style="display: none; margin-top: 20px"&gt; &lt;/div&gt; &lt;div id="Chartspace3" class="toggle-container"&gt;&lt;/div&gt; </code></pre> <p>But it seems like only one of the divs can be toggled by the "toggle-trigger" link...</p> <p>here is my JS:</p> <pre><code>$(".toggle-container").hide(); $(".toggle-trigger").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); return false; }); </code></pre> <p>[EDIT]</p> <p>here is a bigger sample of my html:</p> <pre><code>&lt;h6 class="toggle-trigger"&gt;&lt;a href="#"&gt;Nombre d'Appels par Passerelle&lt;/a&gt;&lt;/h6&gt; &lt;div class="toggle-container" id="Chartspace1" style="width: 800px; height: 300px; margin-bottom: 10px"&gt;&lt;/div&gt; &lt;h6 class="toggle-trigger"&gt;&lt;a href="#"&gt;Pourcentage d'Appels par Utilisation de Passerelle&lt;/a&gt;&lt;/h6&gt; &lt;div class="toggle-container" id="Chartspace2" style="width: 800px; height: 300px; margin-bottom: 10px"&gt;&lt;/div&gt; &lt;h6 class="toggle-trigger"&gt;&lt;a href="#"&gt;Classification des appels par types&lt;/a&gt;&lt;/h6&gt; &lt;div id="PassOptionSelection" style="display: none; margin-top: 20px"&gt; &lt;/div&gt; &lt;div id="Chartspace3" class="toggle-container" style="width: 800px; height: 800px; margin-bottom: 10px;"&gt;&lt;/div&gt; </code></pre> <p>This works well except for the part where only the form will show on the third toggle link, the chart stays hidden...</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload