Jquery Slide Toggle not triggering

Question

I am trying out jquery slidetoggle but I'm having issues trying to run it. Please check on the fiddle provided. https://jsfiddle.net/2yL2Q/63/

When I click on the flip class, its not doing anything.

Code Sample

<div class="some-div">
<div class="flip">Click to slide the panel down or up</div>
</div>
<div class="panel">Hello world!</div>

<div class="some-div">
<div class="flip">Click to slide the panel down or up</div>
</div>
<div class="panel">Hello world!</div>

<div class="some-div">
<div class="flip">Click to slide the panel down or up</div>
</div>
<div class="panel">Hello world!</div>

Script

$(document).ready(function () {
    $(".some-div .flip").click(function () {
        $(this).next('.panel').slideToggle("slow");
    });
});

Josh Crozier · Accepted Answer · 2015-04-18 15:26:34Z

3

You are trying to select a .panel element that is a following adjacent sibling to the clicked .flip element. Your markup would need to look like this in order for your jQuery to work:

<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>

Since those elements aren't siblings in the HTML you provided, you need to traverse the DOM and select the parent element. Simply use the .parent() method:

Updated Example

$(".some-div .flip").click(function () {
    $(this).parent().next('.panel').slideToggle("slow");
});

Alternatively, if the depth/nesting of the elements varies, you could also use the .closest() method:

Updated Example

$(".some-div .flip").click(function () {
    $(this).closest('.some-div').next('.panel').slideToggle("slow");
});

edited Apr 18, 2015 at 15:26

answered Apr 18, 2015 at 15:22

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KC Chai Over a year ago

Thanks. Got it. May i know where can I find this doc?

Josh Crozier Over a year ago

@DroidBeginner Yep--I just linked to both of the mentioned methods in the answer. You can look the the jQuery API documentation to see all the methods - api.jquery.com

Collectives™ on Stack Overflow

Jquery Slide Toggle not triggering

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related