"Accordion Menu"
Bootstrap 3.0.3 Snippet by BhaumikPatel

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-3 col-md-3"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close"> </span>Content</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-pencil text-primary"></span><a href="http://www.jquery2dotnet.com">Articles</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-flash text-success"></span><a href="http://www.jquery2dotnet.com">News</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-file text-info"></span><a href="http://www.jquery2dotnet.com">Newsletters</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-comment text-success"></span><a href="http://www.jquery2dotnet.com">Comments</a> <span class="badge">42</span> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th"> </span>Modules</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <a href="http://www.jquery2dotnet.com">Orders</a> <span class="label label-success">$ 320</span> </td> </tr> <tr> <td> <a href="http://www.jquery2dotnet.com">Invoices</a> </td> </tr> <tr> <td> <a href="http://www.jquery2dotnet.com">Shipments</a> </td> </tr> <tr> <td> <a href="http://www.jquery2dotnet.com">Tex</a> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-user"> </span>Account</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <a href="http://www.jquery2dotnet.com">Change Password</a> </td> </tr> <tr> <td> <a href="http://www.jquery2dotnet.com">Notifications</a> <span class="label label-info">5</span> </td> </tr> <tr> <td> <a href="http://www.jquery2dotnet.com">Import/Export</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-trash text-danger"></span><a href="http://www.jquery2dotnet.com" class="text-danger"> Delete Account</a> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file"> </span>Reports</a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href="http://www.jquery2dotnet.com">Sales</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href="http://www.jquery2dotnet.com">Customers</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-tasks"></span><a href="http://www.jquery2dotnet.com">Products</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-shopping-cart"></span><a href="http://www.jquery2dotnet.com">Shopping Cart</a> </td> </tr> </table> </div> </div> </div> </div> </div> <div class="col-sm-9 col-md-9"> <div class="well"> <h1> Accordion Menu With Icon</h1> Admin Dashboard Accordion Menu </div> </div> </div> </div>
body{margin-top:50px;} .glyphicon { margin-right:10px; } .panel-body { padding:0px; } .panel-body table tr td { padding-left: 15px } .panel-body .table {margin-bottom: 0px; }

Related: See More


Questions / Comments:

Ty for this code and preview. U are awesome :D

Umut Dönmez () - 7 years ago - Reply -2


how to implementation on bootstrap 5xx. i try make this without html tag table. thx

saur () - 7 months ago - Reply 0


i hadn't saw an example using tables like this, is very good and interesting

Santiago Martínez Zavala () - 6 years ago - Reply 0


How can I do when I click on Content or Modules changes the background-image?

Ángel Peralta May () - 6 years ago - Reply 0


I mean the body background-image

Ángel Peralta May () - 6 years ago - Reply 0


bad table snippet

Jopo () - 7 years ago - Reply 0


I was inspired by this snippet to create my own using lists rather than tables -- this made it easier to create a toggle navigation button. Could be useful if someone wants both. Can view here: http://bootsnipp.com/snippe...

Will Weaver () - 7 years ago - Reply 0


It is very nice. It's more useful to me. But i am facing a problem, The "Content" menu is always displaying active. If i am select "Modules" menu and while clicking the 'Invoices' link the page is loading. after the page loaded, the "Content" menu is displaying active. I want displaying the current active menu should be "Modules".

Simply said, I want to show the current active menu in the panel. How to do that? Please give me suggestion. I'm a very new person to bootrstap. I'm trying this "Accodion Menu" with version v3.3.7. Please help me.

Sathish Durai () - 7 years ago - Reply 0


Nice

Joseph Mtinangi () - 7 years ago - Reply 0


Thanks! This was very helpful. I was able to create the menu I need for my apps. I documented my changes here: http://www.instructables.co...

Jeff Cartwright () - 7 years ago - Reply 0


Thanks. Beautiful code!

Angel Camacho () - 7 years ago - Reply 0


Few More Bootstrap Accordion Menus Collection
http://www.designerslib.com...

DesignersLib () - 7 years ago - Reply 0


There are 4 according if i want to add more, where do i need to make the changes, according to links in javascript etc

Karthik () - 8 years ago - Reply 0


Is there a way that you can have some that are accordions and others that are not accordions?

www.codedcontainer.com () - 8 years ago - Reply 0


I was looking over this again and it is possible to have a single item however, this system gets complex if you want the first parent to link to a page. In this instance, you would need to have the dropdowns to function on hover instead and then the programming would get convoluted when determining when they need to collapse again. Does anyone have any other ideas?

www.codedcontainer.com () - 8 years ago - Reply 0


i found another same and easy tutorial on Accordion Menu on www.talkerscode.com

http://talkerscode.com/webt...

Sugar () - 8 years ago - Reply 0


Hi everybody, is there any posibbilty to have a jQuery sources ?

Mohsen () - 8 years ago - Reply 0


Hy... My site: http://onpos.es/product_ite...

On my site the menu does not run the same.
When changing menu, the previous menu is not closed or collapses.
Where is the mistake?

it would be possible to add a sub-submenu?
please helpme... Thanks in advance...

Juan Echenagorria () - 8 years ago - Reply 0


You are using Javascript for Bootstrap version 2 (here: http://onpos.es/js/bootstra..., and this snippet is for Bootstrap version 3. Please download Bootstrap JS version 3 (you can download from getbootstrap.com) and then it will work like this snippet.

maxsurguy () - 8 years ago - Reply 0


I have a problem. I get the accordion to work fine. However I do not want all the top level menu items to expand. For example I might want one top level menu item to have no sub-items but still link to another page.
If I replace #collapseOne with the http link to another page in the code then that makes the accordion break and the link to the other page does not work either even though when I mouse over it I can see the address show (but clicking it does not take me anywhere).


Link 1

Ryan () - 8 years ago - Reply 0


I met this problem, too.
Is anyone could give us a suggestion?

Mavis Huang () - 7 years ago - Reply 0


How can I make this stay at the side of the page when scrolling?

Mr. Steal 'Yo Baguette () - 9 years ago - Reply 0


How about change the tab colour for the open nav? Say the default blue colour and white text?

Dan T () - 9 years ago - Reply 0


anyone have sample code to show that when you press on a link it shows content on the right side instead of redirecting to another site?

beast () - 9 years ago - Reply 0


Nice work..

Juma Fredrick () - 9 years ago - Reply 0


Cool

Chandra Sihombing () - 9 years ago - Reply 0


how do you a sub-menu for example in the article?

ann () - 9 years ago - Reply 0


Hey dude, is there any chance to set the backround color of the menu?

Eric () - 9 years ago - Reply 0


Can anyone tell me what i need to include in html document so this could work? :((

laluna () - 9 years ago - Reply 0


You just need Bootstrap to be included. Get it at getbootstrap.com

maxsurguy () - 9 years ago - Reply 0


And thank you very much for your prompt response.

laluna () - 9 years ago - Reply 0


I did that, but still nothing happen when i click on Content. I have problem with collapse. Maybe, i didn't include everything. :/

laluna () - 9 years ago - Reply 0


You also need Bootstrap JS to go with that. If you preview a snippet in full screen and view source of http://bootsnipp.com/iframe... you will see what you need.

maxsurguy () - 9 years ago - Reply 0


Thank you very much, again.

laluna () - 9 years ago - Reply 0


You're welcome! Enjoy!

maxsurguy () - 9 years ago - Reply 0


is Awesomee..!!

Akbar () - 9 years ago - Reply 0


may i ask what other files will i include to make this beautiful work of yours work?

ralph loco () - 10 years ago - Reply 0


You would need Bootstrap version 3 to make it work, get it here: http://getbootstrap.com

maxsurguy () - 10 years ago - Reply 0


i already had bootstrap 3 but still, it does not work..

ralph loco () - 10 years ago - Reply 0


im sorry, the snippet just showed up but i cant get the snippet work.. does it need any js to included into my page? can i ask what specific js would i include to make this work?

ralph loco () - 10 years ago - Reply 0


It needs Bootstrap 3 JS to be included along with jQuery. Check out the source of http://getbootstrap.com/exa... to see which files are included

maxsurguy () - 10 years ago - Reply 0


thanks, i finally got the panel working.. but i think there's a conflict on my nav drop down cuz my drop downs wont work no more.. sorry, im just a newbie ^_^

ralph loco () - 10 years ago - Reply 0


tables? holy shat, that's soo 2000

rotfl () - 10 years ago - Reply 0


the only thing i don't like is .glyphicon { margin-right:10px; } - this should be specific for accordion only, don't need to modify global glyphicon margin. should be smth like: #accordion .glyphicon { margin-right:10px; } so it only apply margin to icons inside accordion and don't modify other icons styles.

Eugene MechanisM () - 10 years ago - Reply 0


The only thing to make it better is to make the nav not links, so it doesn't look that weird when you click on it.

aeip () - 10 years ago - Reply 0


That's built into bootstrap, I personally like it like that. You can look at http://bootsnipp.com/snippe...
if you don't like the styling of this.

MineSQL () - 10 years ago - Reply 0


Beautiful execution!

Travis Layne () - 10 years ago - Reply 0