Bootstrap folding (Collapse) plugin make sidebar navigation menu

data-toggle= "Collapse" is added to the link for the component you want to expand or collapse. The href or data-target attribute is added to the parent component, and its value is the ID of the child component.

The following table lists the folding (Collapse) plug-ins that are used to handle the heavy scalable class:

Class	Description	instance
. collapse	Hidden content.	Try
. collapse.in	Displays the content.	Try
. collapsing	is added when the transition effect is started, and is removed when the transition effect completes.

You can use the collapse (Collapse) plug-in in the following two ways: Add data-toggle= "Collapse" and data-targetto the element through the Data property : Automatically assigns control of collapsible elements. The Data-target property accepts a CSS selector and applies a folding effect to it. Make sure to add Class . Collapseto the collapsible element. If you want it to be open by default, add an Extra Class .

To add a group management similar to a collapsed panel to a collapsible control, add the Data property data-parent= "#selector." JavaScript: The Collapse method can be activated via JavaScript as follows: $ ('. Collapse '). Collapse ()

<span style= "FONT-SIZE:18PX;" > <div class= "Sidebar-nav" > <form class= "Search Form-inline" > <input type= "text" pla Ceholder= "Search ..." > </form> <a href= "#dashboard-menu" class= "Nav-header" data-toggle= "Colla PSE "><i class=" Icon-dashboard "></i> home </a> <ul id=" Dashboard-menu "class=" Nav nav-list Coll Apse "> <li><a href="/wirelessorder/home.do?flag=home "> Report </a></li> < Li><a href= "/WIRELESSORDER/HOME.DO?FLAG=GRZX" > Personal center </a></li> </ul> <a href= "
        #table-menu "class=" Nav-header "data-toggle=" collapse "><i class=" icon-table "></i> table </a> <ul id= "Table-menu" class= "nav nav-list collapse in" > <li ><a href= "/wirelessorder/table.do ? flag=table "> Table management </a></li> </ul> </span> <a href=" #menu-menu "class="Nav-header collapsed" data-toggle= "collapse" ><i class= "Icon-reorder" ></i> recipes </a> &l T;ul id= "Menu-menu" class= "nav nav-list collapse" > <li ><a href= "/wirelessorder/menu.do?flag=menu" > Menu Management </a></li> </ul> <a href= "#order-menu" class= "Nav-header" data-toggle= "Collap" Se "><i class=" icon-th-large ></i> order </a> <ul id= "Order-menu" class= "nav nav-list collapse" &
            Gt <li ><a href= "/wirelessorder/order.do?flag=order" > Order Management </a></li> </ul> &LT;/DIV&G T

Stacked navigation combined with bootstrap

You can add a title to a set of links, which defines a style (version 2.0.1) for the. Nav-list in Bootstrap.css line number 2201 through 2221.