JQuery .each() to toggle hidden elements

Question

Very new to JQuery, and am struggling to understand .each().

I would like to be able to click on any heading, and have the paragraph under that heading appear, and then disappear. At the moment, I can only get the first paragraph to toggle.

My code is:

<script>
$(document).ready(function(){
  $("h2").click(function(){
    $("#hidden").each(function(){
        $(this).toggle();      
    });
  });
});

</script>

<h2>HEADING 1</h2>
<div id="hidden" style="display:none">
<p>paragraph 1</p>
</div>

<h2>HEADING 2</h2>
<div id="hidden" style="display:none">
<p>paragraph 2</p>
</div>

Thanks very much for any help!

Solution 1

ID of ane element must be unique use class attribute to group similar elements

<h2>HEADING 1</h2>
<div class="hidden" style="display:none">
<p>paragraph 1</p>
</div>

<h2>HEADING 2</h2>
<div class="hidden" style="display:none">
<p>paragraph 2</p>
</div>

then also there is no need to use a each loop, you can call .toggle() in the jQuery wrapper returned by the selector $('.hidden')

$(document).ready(function(){
  $("h2").click(function(){
    $('.hidden').toggle();      
  });
});

Update Didn't read the complete question the question seems to be how to toggle the next div

$(document).ready(function(){
  $("h2").click(function(){
    $('.hidden').hide();
    $(this).next().toggle();      
  });
});

Demo: Fiddle

Solution 2

each isn't the problem here. You don't actually need to use each.

The issue is selecting the hidden div using an ID ('#hidden), this will only return the first found element as it is expected that ID's will be unique.

To get around this you can change your code to this assuming that the div you want to toggle is always directly after the heading tag:

$(document).ready(function(){
  $("h2").click(function(){
    $(this).next('div').toggle();      
  });
});

This will toggle the visibility of the next div after the h2 that was clicked.

Working example - http://jsfiddle.net/VcRLM/

Solution 3

An ID has to be unique. Your id ("hidden") is used twice. You can use classes instead.

Update: Just pasted your code in a jsfiddle and saw that you have one paragraph below each heading. You will have to use a container or some attribute to toggle these paragraphs.

HTML:

<div class="box">
<h2>HEADING 1</h2>
<div class="hidden" style="display:none">
<p>paragraph 1</p>
</div>
</div>

<div class="box">
<h2>HEADING 2</h2>
<div class="hidden" style="display:none">
<p>paragraph 2</p>
</div>
</div>

JS:

$(document).ready(function(){
  $("h2").click(function(){
    var myparent=$(this).parent();
    $(".hidden", myparent).each(function(){
        $(this).toggle();      
    });
  });
});

Solution 4

$(function() {
    // Grab all the headings in the page and listen to click event.
    $('h1').click(function () {
        // "this" refers to the current element which is an h2.
        // We're targeting the next element which is the #hidden div
        $(this).next('#hidden').toggle();
    });
});

NOTE: it's a good idea to hide the div with javascript so that javascript-disabled browsers still can see the #hidden div so the code will be:

$(function() {
    // hide the #hidden by default
    $('#hidden').hide();

    // Grab all the headings in the page, and listen when they're clicked 
    $('h2').click(function () {
        // the this keyword refers to the current element which is h2.
        // we're targeting here the next element which is the #hidden div
        $(this).next('#hidden').toggle();
    });
});

View more solutions