也切换字体真棒图像

Question

I have the following nav-bar:-

<div id="sidebar-wrapper">
    <ul class="sidebar-nav nav-pills nav-stacked" id="menu">
        <li class="active" onclick="showMainDivision('legislate','bills','committees','favourites')">
            <a ng-click="getLegislators()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-user fa-stack-1x "></i></span>Legislators</a>
        </li>
        <li onclick="showMainDivision('bills','legislate','committees','favourites')" >
            <a ng-click="getActiveBill()"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-file-o fa-stack-1x "></i></span>Bills</a>
        </li>
        <li onclick="showMainDivision('committees','bills','legislate','favourites')" >
            <a ng-click="getCommittees()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-sign-in fa-stack-1x "></i></span>Committees</a>
        </li>
        <li onclick="showMainDivision('favourites','committees','bills','legislate');">
            <a ng-click="getFavourites()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-star-o fa-stack-1x "></i></span>Favourites</a>
        </li>
    </ul>
</div>

I have the following toggle button:-

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li class="active">
            <button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="fa-stack"> <i class="fa fa-bars fa-stack-2x "></i></span></button>
        </li>
    </ul>
</div>

On the button click I have the following javascript function:-

$("#menu-toggle-2").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled-2");
    $('#menu ul').hide();
});

The thing is the toggle is working properly but the toggle just hides the li items the font-awesome images under the i tag are still visible. I want them to be gone too along with their respective li items and they should appear back when toggled back. I am pretty new to this any help is appreciated.

Answer 1

There is no element with id="wrapper" Also I'd try to hide just the menu, there is no ul under menu, it's the same level. $('#menu').hide();

Answer 2

You are using bootstrap collapse in wrong way, you should lean on its builtin collapse functionality use this refs: http://getbootstrap.com/javascript/#collapse

so, in short, you don't need to write any JS yourself, just change following:

<button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2" href="#sidebar-wrapper" aria-expanded="false" aria-controls="sidebar-wrapper">> <span class="fa-stack"> <i class="fa fa-bars fa-stack-2x "></i></span></button>

and

 <div id="sidebar-wrapper" class="collapse"> 

I presumed that you want to hide whole sidebar wrapper, if that's not the case then just apply this to