<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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>Ohio</a> </h4> </div> <div id="MainMenu"> <div class="list-group panel"> <a href="#demo1" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Currents</a> <div class="collapse" id="demo1"> <a href="#SubMenu22" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Local News <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="SubMenu22"> <a href="https://news.google.com/news/section?cf=all&pz=1&geo=detect_metro_area&siidp=07dfe6cffd9657a9587d66afce98909d9863&ict=ln" class="list-group-item" data-parent="#SubMenu1">Featured</a> <a href="https://www.google.com/webhp#q=weather" class="list-group-item" data-parent="#SubMenu1">Weather</a> <div> <a href="#SubMenu23" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Genre <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="SubMenu23"> <a href="#" class="list-group-item" data-parent="#SubMenu1">Business</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Sports</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Education</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Politics</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Religion</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Opinion</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Science and Enviorment</a> </div> </div> <a href="#" class="list-group-item" data-parent="#SubMenu1">Student Newspaper</a> </div> <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">National News <i class="fa fa-caret-down"></i></a> <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Movie Showtimes <i class="fa fa-caret-down"></i></a> <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Ticketmaster Events <i class="fa fa-caret-down"></i></a> </div> <a href="#demo2" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Classifieds</a> <div class="collapse" id="demo2"> <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">For Sale <i class="fa fa-caret-down"></i></a> <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Jobs <i class="fa fa-caret-down"></i></a> <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Apartments for rent <i class="fa fa-caret-down"></i></a> <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Classifieds Homepage <i class="fa fa-caret-down"></i></a> </div> <a href="#demo5" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Food</a> <div class="collapse" id="demo5"> <a href="#SubMenu14" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Order Online <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="SubMenu14"> <a href="#" class="list-group-item" data-parent="#SubMenu1">Restaurant search by name</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Filter by distance</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Filter by genre</a> </div> <a href="#SubMenu15" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Reserve a Table <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="SubMenu15"> <a href="#" class="list-group-item" data-parent="#SubMenu1">Restaurants near Columbus, Ohio + Reserve a Table</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Refine by Price, Genre, Rating, or Hours</a> </div> <a href="#SubMenu16" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Recipes <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="SubMenu16"> <a href="#" class="list-group-item" data-parent="#SubMenu1">Breakfast</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Lunch</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Dinner</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Deserts</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Appetizers</a> </div> </div> <a href="#demo3" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Music</a> <div class="collapse" id="demo3"> <a href="#SubMenu11" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Local Music <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="SubMenu11"> <a href="#" class="list-group-item" data-parent="#SubMenu11">Live FM Radio</a> <a href="#" class="list-group-item" data-parent="#SubMenu11">Indie Artist Uploads</a> <a href="#" class="list-group-item" data-parent="#SubMenu11">Local Touring Artists</a> <a href="#" class="list-group-item" data-parent="#SubMenu11">Genre</a> </div> <a href="#SubMenu12" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Podcasts <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="SubMenu12"> <a href="#" class="list-group-item" data-parent="#SubMenu1">Search by keyword</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Categories</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Trending</a> </div> <a href="#SubMenu17" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Online Radio <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="SubMenu17"> <a href="#" class="list-group-item" data-parent="#SubMenu1">Search by Artist</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Search by Genre</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Search by Station or Call Letters</a> </div> </div> </div> </div> <a href="#demo4" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Games</a> <div class="collapse" id="demo4"> <a href="#SubMenu13" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Touch Screen Games <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="SubMenu13"> <a href="#" class="list-group-item" data-parent="#SubMenu1">GameMix.com</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Clay.io</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Itch.io</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">MobileWebArcade.com</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">OnlineGames.com</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Itch.io</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">SnappyGames.com</a> <div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1"> </div> </div> <a href="javascript:;" class="list-group-item">Retro Arcade</a> <a href="javascript:;" class="list-group-item">Nintendo Emulators</a> </div> <a href="#demo6" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Learning</a> <div class="collapse" id="demo6"> <a href="#SubMenu18" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Informational videos <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="SubMenu18"> <a href="#" class="list-group-item" data-parent="#SubMenu1">College Lectures</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Khan Acadam</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Big Think</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">BrightStorm</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">TED</a> <a href="https://www.youtube.com/user/HowStuffWorks/videos" class="list-group-item" data-parent="#SubMenu1">How Stuff Works</a> <a href="https://www.youtube.com/user/VoiceAndExit/videos" class="list-group-item" data-parent="#SubMenu1">Voice and Exit</a> <div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1"> </div> </div> <a href="#SubMenu19" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Online Free Courses <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="SubMenu19"> <a href="#" class="list-group-item" data-parent="#SubMenu1">Coursera</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Udemy</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">EdX</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Udacity</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">University of the People</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">iTunes U</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Skillfeed</a> <a href="https://www.youtube.com/user/HowStuffWorks/videos" class="list-group-item" data-parent="#SubMenu1">ALLISON</a> <a href="https://www.youtube.com/user/VoiceAndExit/videos" class="list-group-item" data-parent="#SubMenu1">Open2Study</a> <div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1"> </div> </div> </div> </div> <a href="#demo7" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Local Businesses</a> <div class="collapse" id="demo7"> <a href="#SubMenu21" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Yellow Pages Business Directory <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="SubMenu21"> <div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1"> </div> </div> <a href="javascript:;" class="list-group-item">Coupons & Gift Cards</a> <a href="javascript:;" class="list-group-item">Services & Contractors</a> </div> </div> </div> </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;}