"Accordion Multi Level List Group Menu"
Bootstrap 3.3.0 Snippet by moinakbarali

<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"> <ul class="list-group"> <li class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><a href="http://fb.com/moinakbarali">Articles</a> <ul class="list-group"> <li class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><a href="http://fb.com/moinakbarali">Articles</a></li> <li class="list-group-item"><span class="glyphicon glyphicon-flash text-success"></span><a href="http://fb.com/moinakbarali">News</a></li> <li class="list-group-item"><span class="glyphicon glyphicon-file text-info"></span><a href="http://fb.com/moinakbarali">Newsletters</a></li> <li class="list-group-item"> <span class="glyphicon glyphicon-comment text-success"></span><a href="http://fb.com/moinakbarali">Comments</a><span class="badge">42</span></li> </ul> </li> <li class="list-group-item"><span class="glyphicon glyphicon-flash text-success"></span><a href="http://fb.com/moinakbarali">News</a></li> <li class="list-group-item"><span class="glyphicon glyphicon-file text-info"></span><a href="http://fb.com/moinakbarali">Newsletters</a></li> <li class="list-group-item"> <span class="glyphicon glyphicon-comment text-success"></span><a href="http://fb.com/moinakbarali">Comments</a><span class="badge">42</span></li> </ul> </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="list-group"> <a href="#" class="list-group-item"> Cras justo odio </a> <div class="list-group"> <a href="#" class="list-group-item"> Cras justo odio </a> <a href="#" class="list-group-item">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</a> </div> <a href="#" class="list-group-item">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</a> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive"><span class="glyphicon glyphicon-heart"> </span>Reports</a> </h4> </div> <div id="collapseFive" class="panel-collapse collapse"> <div class="list-group"> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a> </div> <div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a> </div> <div class="list-group"> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a> </div> </div> </div> </div> </div> <div class="col-sm-9 col-md-9"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Dashboard</h3> </div> <div class="panel-body"> <p>Admin Dashboard Accordion List Group Menu</p> <div class="alert alert-success"><h3>Yes! It's compatible with BS 3.0.3, 3.1 & 3.2 </h3></div> </div> </div> </div> </div> </div>
body{margin:50px;} #accordion .glyphicon { margin-right:10px; } .panel-collapse>.list-group .list-group-item:first-child {border-top-right-radius: 0;border-top-left-radius: 0;} .panel-collapse>.list-group .list-group-item {border-width: 1px 0;} .panel-collapse>.list-group {margin-bottom: 0;} .panel-collapse .list-group-item {border-radius:0;} .panel-collapse .list-group .list-group {margin: 0;margin-top: 10px;} .panel-collapse .list-group-item li.list-group-item {margin: 0 -15px;border-top: 1px solid #ddd !important;border-bottom: 0;padding-left: 30px;} .panel-collapse .list-group-item li.list-group-item:last-child {padding-bottom: 0;} .panel-collapse div.list-group div.list-group{margin: 0;} .panel-collapse div.list-group .list-group a.list-group-item {border-top: 1px solid #ddd !important;border-bottom: 0;padding-left: 30px;} .panel-collapse .list-group-item li.list-group-item {border-top: 1px solid #DDD !important;}

Similar snippets: See More


Comments:

Zee 2014-02-05 08:57:49
    how to make whole 'panel-default'clickable.?
Al .tolerant 2014-02-06 12:01:13
    Hi,
I'm use attr of default accordion on div panel, just insert him attributes
class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_someid" data-target="#collapse_someid"
maxani 2014-02-09 10:38:51
    Hi.
How could I add submenu feature?
For instance I'd like to have a sort of dropdown submenu under "Articles" or "Cras justo odio" of the above example.
Thank you.
Moin Akbar 2014-02-18 06:06:08
    Yes, but sorry I was away, I just read your comment, I will give a solution shortly.
Moin Akbar 2014-02-18 06:28:16
    Hi. I have updated the Snippet for you :)
JiPeng Tan 2014-08-12 21:17:21
    Hi,
Moe 2015-04-10 14:37:12
    Hey JiPeng Tan,
Since the a-element is inside the panel-heading-element, you just have to move the a-element before the .panel-heading-element and the /a behind it :)
Cheers and happy coding
-Moe
Abhishek 2015-08-27 15:10:45
    Hi, thanks for the shipp!!, Just wondering is it possible to have the list group that have item with link to current page open on page load
Shaunak 2016-08-08 21:06:26
    Using Bootstrap2.3, is it possible to collapse a nested list formed by ul and li.
<ul>
<li>1
<li>2
<ul>
<li> 3 </li>
</ul>
</li>
</li>
</ul>
Closing 1 should close the entire li tag, and closing 2 should close the li tag for 2
Faisal Arkan 2016-10-23 23:01:20
    thankss!!

Commenting will be back soon.