CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Unknown User
Unknown User

Reputation: 3668

jquery - vertical accordion navigation menu

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.

Upvotes: 1

Views: 1869

Answers (2)

Venkat
Venkat

Reputation: 263

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

Upvotes: 0

Taylan Aydinli
Taylan Aydinli

Reputation: 4363

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

Upvotes: 4

Related Questions