Twitter bootstrap dropdown menu doesn't work properly

Question

I trying to use this menu Bootstrap Collapsible Side Menu but something doesn't work properly. There is + sign and - for open and close. When I open first menu + become - as must be but when I click on second menu first must close and - must become + . I hope you get what I mean. This doesn't work properly. Also when I click on second menu the icon that is front of the name become - also.

I've tried to recreate this menu in jsfiddle but doesn't work there. Doesn't open the menu but you can see what happen with + and - signs. If you click on both links they are with - .

Here is the jsfiddle . I didn't work with jsfiddle before.

Answer 1

Looks like you just forgot to load jquery, or you are loading it after bootstrap. It works fine if you load it properly.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

http://jsfiddle.net/acidrat/BP6Wh/2/

Check you browser console for error messages.

EDIT

Ok, now i get it. You will have to work with Bootstrap collapse events that are triggered after collapsing.

 $('#menu-bar').on('shown.bs.collapse', function () {
             var currentlySelectedElement = $(this).find('.collapse.in');
             var targetAnchor = $('[data-target="#' + currentlySelectedElement.attr('id') + '"]');
             $('[data-target="#' + currentlySelectedElement.attr('id') + '"]').find("i.fa-plus").removeClass("fa-plus").addClass("fa-minus");
         });

         $('#menu-bar').on('hidden.bs.collapse', function () {
             var currentlyCollapsedElements = $(this).find('.collapsed');
             currentlyCollapsedElements.each(function () {
                 $(this).find('i.fa-minus').removeClass('fa-minus').addClass('fa-plus');
             });

         });

Here the updated jsFiddle: http://jsfiddle.net/acidrat/BP6Wh/5/