CODEWITHSUNDEEP
jquery
StandardNerd
StandardNerd

Reputation: 4183

jquery slide up menu

i want first to hide all submenus and after click on on the span.expand all submenus should be shown.

this is my HTML:

<div class="ym-gbox">
    <ul>
        <li>menu1</li>
        <li>menu2</li>
        <ul>
            <li>submenu1</li>
            <li>submenu2</li>
        </ul>
        <ul>
            <li>submenu1</li>
            <li>submenu2</li>
        </ul>  
    </ul>
</div>

<div id="expandbutton">
    <span class="button expand">expand</span>
</div>

and my jQuery:

jQuery(document).ready(function($) {
    $('.ym-gbox ul li ul li').hide();

        $('.expand').click(function() {
        if ($(this).hasClass('act')) {
            $(this).removeClass('act');
            $('.ym-gbox ul li').not('.menuactive').children('ul').children('li').slideUp('fast');
        } else {
            $(this).addClass('act'); 
            $('.ym-gbox ul li ul li').slideDown('fast');  
        }

    });
});

What i'm doing wrong?

Upvotes: 1

Views: 1284

Answers (3)

Ram
Ram

Reputation: 144689

Your selectors do not select the elements that you expect, I have modified the markup, try the following:

<div class="ym-gbox">
    <ul>
        <li class='expand'>menu1</li>
        <ul>
            <li>submenu1</li>
            <li>submenu2</li>
        </ul>
        <li class='expand'>menu2</li>
        <ul>
            <li>submenu1</li>
            <li>submenu2</li>
        </ul>
    </ul>
</div>



jQuery(document).ready(function() {
    $('.ym-gbox > ul ul').hide();
    $('.ym-gbox li.active').next().show();

    $('.expand:not(.active)').click(function() {
         $(this).addClass('active').siblings('li').removeClass('active')
         $(this).siblings('ul').slideUp();
         $(this).next('ul').slideDown()                
    });
});

http://jsfiddle.net/U5P5Y/

Upvotes: 1

Dirk
Dirk

Reputation: 1020

why not giving your submenu an own id and call something like:

$(".expand").toggle(function(e){
 $("#submenu).slideUp("slow");
}, function(){
 $("#submenu").slideDown("slow");
})

Upvotes: 0

Samich
Samich

Reputation: 30115

It's because you have invalid html. It should be like this:

<div class="ym-gbox">
    <ul>
        <li>menu1
            <ul>
                <li>submenu1</li>
                <li>submenu2</li>
            </ul>  
        </li>
        <li>menu2
            <ul>
                <li>submenu1</li>
                <li>submenu2</li>
            </ul>
        </li>
    </ul>
</div>

<div id="expandbutton">
    <span class="button expand">expand</span>
</div>​

Code: http://jsfiddle.net/HCE9j/4/

Upvotes: 0

Related Questions