CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Adrian M.
Adrian M.

Reputation: 7423

jQuery toggle only the child

I am struggling with this code, trying to toggle only the child element of the toggle button I click, but so far when I click a toggle button, ALL hidden elements show, not just this element's child.. What am I doing wrong?

Thank you for any suggestions..

jQuery:

$('.menu-item-has-children > a').click(function(event) {
    if(!$('.sub-menu > .menu-item').is(':visible'))
    {
        $(this).addClass('selected');
    }
    else {
        $(this).removeClass('selected');
    }

        $('.sub-menu').slideToggle('fast');
    return false;
});

HTML:

<div class="menu-primary" style="display: block;">
    <ul id="menu-menu-1" class="v-list">
        <li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-30"><a title="Browse">Browse</a>
        <ul class="sub-menu" style="display: block;">
            <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="link">Browse by Type</a></li>
            <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="link">Browse by Author</a></li>
            <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="link">Browse by Country</a></li>
        </ul>
        </li>
        <li id="menu-item-34" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-34"><a class="selected">Learn</a>
        <ul class="sub-menu" style="display: block;">
            <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="link">General</a></li>
        </ul>
        </li>
        <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="link">About</a></li>
    </ul>
</div>

Upvotes: 1

Views: 907

Answers (2)

Shaunak D
Shaunak D

Reputation: 20626

Check this Fiddle Demo

$('.menu-item-has-children > a').click(function(event) {
   $(this).next('.sub-menu').slideToggle('fast').toggleClass('selected');
});

Use toggleClass().

Upvotes: 0

Marius George
Marius George

Reputation: 526

Fixed:

$('.menu-item-has-children > a').click(function(event) {
    if(!$('.sub-menu > .menu-item').is(':visible'))
    {
        $(this).addClass('selected');
    }
    else {
        $(this).removeClass('selected');
    }

        $(this).next().slideToggle('fast');
    return false;
});

Upvotes: 1

Related Questions