边栏在引导程序中切换

Question

我的代码有问题我正在使用JSF并且我创建了一个标题和带有引导程序的侧边栏但问题是我无法隐藏并显示带有菜单切换图标的侧边栏（它是一个带有id＃menu-toggle）。

这是侧边栏的代码：

 <div class="nav-side-menu">
    <div class="brand">Options</div>
    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>

    <div class="menu-list">

        <ul id="menu-content" class="menu-content collapse out">


            <li  data-toggle="collapse" data-target="#products" class="collapsed active">
                <a href="#"><i class="fa fa-gift fa-lg"></i> Inscription <span class="arrow"></span></a>
            </li>
            <ul class="sub-menu collapse" id="products">
                <li><a href="#">Comptes étudiants</a></li>
                <li><a href="#">Etudiants</a></li>
                <li><a href="#">Bacheliers (OPI)</a></li>
            </ul>


            <li data-toggle="collapse" data-target="#service" class="collapsed">
                <a href="#"><i class="fa fa-globe fa-lg"></i> Paramétrage <span class="arrow"></span></a>
            </li>  
            <ul class="sub-menu collapse" id="service">
                <li>add here</li>
            </ul>


            <li data-toggle="collapse" data-target="#new" class="collapsed">
                <a href="#"><i class="fa fa-car fa-lg"></i> Utilisateurs </a>
            </li>



            <li>
                <a href="#">
                    <i class="fa fa-user fa-lg"></i> Statistiques
                </a>
            </li>

            <li>
                <a href="#">
                    <i class="fa fa-users fa-lg"></i> Historique
                </a>
            </li>
        </ul>
    </div>
</div>

我希望有人能够回答我，并提前致谢。