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.

Answer 1

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');
    }
};

Answer 2

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>');
    }
 });
}); });