CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jonny Haynes
Jonny Haynes

Reputation: 3186

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

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');
            }
        });
    });

Upvotes: 0

Views: 2835

Answers (7)

Mad
Mad

Reputation: 1

I'd suggest .siblings().first() to just affect the first sibling jQuery finds.

Upvotes: 0

Andre Haverdings
Andre Haverdings

Reputation: 917

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();
    });
});

Upvotes: 4

David Murdoch
David Murdoch

Reputation: 89322

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

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

Upvotes: 0

tschaible
tschaible

Reputation: 7695

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()

Upvotes: 0

TeKapa
TeKapa

Reputation: 546

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');
                            }
                    });
            });

Upvotes: 1

ndim
ndim

Reputation: 37777

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".

Upvotes: 0

Sheff
Sheff

Reputation: 3482

$(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');
                        }
                });
        });

Upvotes: 1

Related Questions