How to stop jQuery affecting all elements, when I only want one element to change

Question

OK, I have a list of <li>s with some content in like so:

<div>
    <ul>
        <li><h4>...</h4><div>...</div></li>
        <li><h4>...</h4><div>...</div></li>
        <li><h4>...</h4><div>...</div></li>
        <li><h4>...</h4><div>...</div></li>
        <li><h4>...</h4><div>...</div></li>
        <li><h4>...</h4><div>...</div></li>
        <li><h4>...</h4><div>...</div></li>
    </ul>
</div>

Using jQuery, the <div> is hidden. When one of the <h4>s is 'clicked' the <div> is made visible, and when clicked again is made invisible.

This all works fine except, when clicking on the <h4> in any <li> all of the <div>s are made visible.

How do I stop this happening? I only want the <div> in the same <li> that the <h4> that is clicked to be made visible.

This is my jQuery:

$(document).ready(function() {
 $('div div').hide();
 $('div h4').click(function(){
  if($('div div').is(':hidden')) {
   $('div div').show();
   $('div li').addClass('open');
   }
  else {
    $('div div').hide();
    $('div li').removeClass('open');
   }
  });
 });

Answer 1

$(document).ready(function() {
        $('div div').hide();
        $('div h4').click(function(){

                if($(this).parents('div').is(':hidden')) {
                        $(this).find('div').show();
                        $(this).addClass('open');
                        }
                else {
                                $(this).parents('div').hide();
                                $(this).removeClass('open');
                        }
                });
        });

Answer 2

The click handler function is using the normal $('foo') which is looking through the global document. I'd bet the solution involves some use of this, referring to the actual specific h4 element that has been clicked on, not to "everything in the document".

Answer 3

Try this:

$(document).ready(function() {
            $('div div').hide();
            $('div h4').click(function(){ 
                    var $li=$(this).closest('li');
                    var $innerDiv=$li.find('div')

                    if($innerDiv.is(':hidden')) {
                            $innerDiv.show();
                            $li.addClass('open');
                            }
                    else {
                                    $innerDiv.hide();
                                    $li.removeClass('open');
                            }
                    });
            });

Answer 4

By selecting $('div div') you are selecting all divs that are children of other divs. This works for your initial hide, since you are hiding all the divs, but in the if statement you probably want something more like $(this).next()

Answer 5

The following should work as your click event for $("div h4").click(...).

$(this.parentNode).toggleClass("open").children("div").toggle();

Answer 6

you can also use the 'siblings' selector

$(document).ready(function() {
    $('div div').hide();
    $('div h4').click(function(){
     $(this.parentNode).toggleClass('open');
     $(this).siblings('div').toggle();
    });
});