CODEWITHSUNDEEP
jqueryhtml
DarrylGodden
DarrylGodden

Reputation: 1534

jQuery slideToggle of child UL element

I've searched a number of similar questions on SO and tried the answers there with no success, I'm trying to slideToggle a UL underneath the clicked H3, here is my jQuery:

    $("h3").click(function () {
        $("this").parent().next("ul").slideToggle();
    });

Here is the mark-up:

            <h3 class="accordion-header">Element Type<img class="accordion-marker" src="images/accordion-down.png" /></h3>
        <ul class="accordion">
            <li><input type="checkbox" /><label>ACME Packet 9200</label></li>
            <li><input type="checkbox" /><label>Audio Code</label></li>
            <li><input type="checkbox" /><label>CS2K</label></li>
            <li><input type="checkbox" /><label>IMSS Access</label></li>
            <li><input type="checkbox" /><label>IMSS Core</label></li>
        </ul>

Any idea where I am going wrong?

Upvotes: 0

Views: 588

Answers (1)

Andy Holmes
Andy Holmes

Reputation: 8087

$("h3").click(function () {
    $(this).siblings("ul").slideToggle();
});

Close :) You are looking at the sibling of the H3, not a child element. Also, when using $(this) as it is an object/reference it doesn't require quote marks.

If you are using multiple instances on the page, use this code

$("h3").click(function () {
    $(this).next("ul").slideToggle();
});

Upvotes: 1

Related Questions