CODEWITHSUNDEEP
jquery
KC Chai
KC Chai

Reputation: 1617

Jquery Slide Toggle not triggering

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

Upvotes: 2

Views: 43

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241198

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

Upvotes: 3

Related Questions