CODEWITHSUNDEEP
javascriptjqueryhtmlaccordionslidetoggle
Nithin Viswanathan
Nithin Viswanathan

Reputation: 3283

How can I perform accordion using slide toggle effect

I have vertical menu,I want to perform accordion for this menu. html code is

<ul id="menuLeft">
    <li id="ApplicationId" class="menu-li"><span><img src="../Images/tab_arrow.png"></span><a href="#">Application</a>
        <ul class="submenu-ul" style="display: none;">
            <li class="submenu-li"><span><img src="../Images/leftmenu_downarrow.png"></span><a href="#">Basic Information</a>
            </li>
            <li class="submenu-li"><span><img src="../Images/leftmenu_downarrow.png"></span><a href="#">Vipin</a>
            </li>
        </ul>
    </li>
    <li id="ReviewandSubmissionID" class="menu-li"><span><img src="../Images/tab_arrow.png"></span><a href="#">Review and Submission</a>
        <ul class="submenu-ul" style="display: none;">
            <li class="submenu-li"><span><img src="../Images/leftmenu_downarrow.png"></span><a href="#">Nithin</a>
            </li>
        </ul>
    </li>
</ul>

script is

$('.submenu-ul').hide();
$(document).on("click", ".menu-li", function () {
    var selected_li = $(this).attr('id');
    $('#' + selected_li + ' ul').slideToggle('slow');
});

My problem is when I click on one menu it shows its submenu, but at the same time If I click on the second menu it also showing its submenu without closing the first submenu. How can I solve this issue?

I edited my fiddle demo

HERE

Upvotes: 0

Views: 830

Answers (2)

codingrose
codingrose

Reputation: 15699

Hide visible elements before opening new element.

Try:

Change

$u.appendTo($li);

to

$u.appendTo($li).hide();

$(document).on("click", "#" + value.MenuId, function () {        
    var selected_li = $(this).attr('id');        
    if(!($('#' + selected_li + ' ul').is(':visible'))){
        $('li ul:visible').slideUp();
    }
    $('#' + selected_li + ' ul').slideToggle('slow');
});

Updated fiddle here.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

In the click handler slide up all the other submenu-ul elements

var $subs = $('.submenu-ul').hide();
$(document).on("click", ".menu-li", function () {
    var selected_li = $(this).attr('id');
    var $ul = $(this).find('ul').stop(true, true).slideToggle('slow');
    $subs.not($ul).stop(true, true).filter(':visible').slideUp();
});

Demo: Fiddle

Upvotes: 1

Related Questions