jquery - vertical accordion navigation menu

Question

I have this vertical accordion like side bar navigation. Everything is working fine but the i'm facing some problem with the icons that i'm using it from Twitter Bootstrap 3.

Here's the FIDDLE.

When I expand the a list item i want to the icon to be facing down and when I click again it's not getting collapsed. And also I want the icon to be changed to left facing chevron icon.

Also please help me in adding transition to it like when it's about to expand I want that to be animated from facing left to down.

And also I can expand the menu only when I click on the text. I couldn't do that to the entire row.

Thanks in advance.

score 4 · Accepted Answer · answered Nov 25 '13 at 08:44

4

I think I managed to implement what you were after: Here's the FIDDLE

Here's the main JS function. It's a little untidy but the basic functionality is there. You can fix it as you want.

function toggleAccordion(li) {
    if(li.hasClass('active')) {
        li.removeClass('active');
        $('.sub-menu', li).slideUp();
        $('i', li).removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-left');
    }
    else {
        $('li.active .sub-menu').slideUp();
        $('li i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-left');
        $('li.active').removeClass('active');
        li.addClass('active');
        $('.sub-menu', li).slideDown();
        $('i', li).removeClass('glyphicon-chevron-left').addClass('glyphicon-chevron-down');
    }
};

answered Nov 25 '13 at 08:44

Taylan Aydinli

4,333
15
39
33

Thanks a lot. I had no clue on how to do it using jquery. Now that i've got this I can stick on to it and make it even better. Thank you again.. +1 vote :) – Unknown User Nov 25 '13 at 08:50
Can you please say me what does this `$('i', li)` selector means? – Unknown User Nov 25 '13 at 09:41
It means "search for a `i` element *under* the li element". That way, the selector will only find the `` elements which are a child of the specified `li` element. Check [this answer](http://stackoverflow.com/a/306904/36938) for details. – Taylan Aydinli Nov 25 '13 at 10:30

Venkat · Answer 2 · 2013-11-25T11:18:13.787

Check this below code

$(window).load(function(){
$(document).ready(function() {
    $('.sidebar ul li a').click(function(ev) {
    //$('.sidebar .sub-menu').not($(this).parents('.sub-menu')).slideUp();
    $(this).next('.sub-menu').slideToggle();
    ev.stopPropagation();           
    if($(this).find("i").hasClass('glyphicon-chevron-left')){
        $(this).find("i").remove();
        $(this).append('<i class="sidebar-icon glyphicon glyphicon-chevron-down"></i>');
    }else{
        $(this).find("i").remove();
        $(this).append('<i class="sidebar-icon glyphicon glyphicon-chevron-left"></i>');
    }
 });
}); });

jquery - vertical accordion navigation menu

2 Answers2