<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 ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" /> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2"> <div class="panel panel-default"> <div class="panel-body"> <div class="slide-container"> <div class="list-group" id="mg-multisidetabs"> <a href="#" class="list-group-item"><span>Category</span><span class="glyphicon glyphicon-menu-right mg-icon pull-right"></span></a> <div class="panel list-sub"> <div class="panel-body"> <div class="list-group"> <a href="#" class="list-group-item"><span>Men</span><span class="glyphicon glyphicon-menu-right mg-icon pull-right"></span></a> <div class="panel list-sub"> <div class="panel-body"> <div class="list-group"> <a href="#" class="list-group-item">Button Ups<span class="glyphicon glyphicon-menu-right mg-icon pull-right"></span></a> <div class="panel list-sub"> <div class="panel-body"> <a href="#" class="list-group-item">Long Sleeve</a> <a href="#" class="list-group-item">Short Sleeve</a> <a href="#" class="list-group-item">Cutoff Sleeve</a> </div> </div> <a href="#" class="list-group-item">Sweater</a> <a href="#" class="list-group-item">Suitings</a> <a href="#" class="list-group-item">Pants</a> <a href="#" class="list-group-item">Jackets<span class="glyphicon glyphicon-menu-right mg-icon pull-right"></span></a> <div class="panel list-sub"> <div class="panel-body"> <a href="#" class="list-group-item">Leather</a> <a href="#" class="list-group-item">Leather Biker Jacket</a> <a href="#" class="list-group-item">Hoodies</a> <a href="#" class="list-group-item">Sweatshirt</a> </div> </div> </div> </div> </div> <a href="#" class="list-group-item">Women<span class="glyphicon glyphicon-menu-right mg-icon pull-right"></span></a> <div class="panel list-sub"> <div class="panel-body"> <div class="list-group"> <a href="#" class="list-group-item">Women Dapibus 1</a> <a href="#" class="list-group-item">Women Morbi 2</a> <a href="#" class="list-group-item">Women Porta 3</a> <a href="#" class="list-group-item">Women Vestibulum 4</a> </div> </div> </div> <a href="#" class="list-group-item">Handbags<span class="glyphicon glyphicon-menu-right mg-icon pull-right"></span></a> <div class="panel list-sub"> <div class="panel-body"> <div class="list-group"> <a href="#" class="list-group-item">Handbags Dapibus 1</a> <a href="#" class="list-group-item">Handbags Morbi 2</a> <a href="#" class="list-group-item">Handbags Porta 3</a> <a href="#" class="list-group-item">Handbags Vestibulum 4</a> </div> </div> </div> </div> </div> </div> <a href="#" class="list-group-item"><span>Condition</span><span class="glyphicon glyphicon-menu-right mg-icon pull-right"></span></a> <div class="panel list-sub"> <div class="panel-body"> <div class="list-group"> <a href="#" class="list-group-item">Handbags Dapibus 1</a> <a href="#" class="list-group-item">Handbags Morbi 2</a> <a href="#" class="list-group-item">Handbags Porta 3</a> <a href="#" class="list-group-item">Handbags Vestibulum 4</a> </div> </div> </div> <a href="#" class="list-group-item"><span>Size</span></a> <a href="#" class="list-group-item"><span>Brand</span></a> <a href="#" class="list-group-item"><span>Pricing</span></a> </div><!-- ./ end list-group --> </div><!-- ./ end slide-container --> </div><!-- ./ end panel-body --> </div><!-- ./ end panel panel-default--> </div><!-- ./ endcol-lg-6 col-lg-offset-3 --> </div><!-- ./ end row --> </div>

#mg-multisidetabs .list-group-item:first-child { border-top-left-radius: 0; border-top-right-radius: 0; } #mg-multisidetabs .list-group-item:last-child { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } #mg-multisidetabs .list-group{ margin-bottom:0; } .slide-container{ overflow:hidden; } #mg-multisidetabs .list-sub{ display:none; } #mg-multisidetabs .panel{ margin-bottom:0; } #mg-multisidetabs .panel-body{ padding:1px 2px; } .mg-icon{ font-size:10px; line-height: 20px; }

$(document).ready(function(){ var multisidetabs=(function(){ var opt,parentid, vars={ listsub:'.list-sub', showclass:'mg-show' }, test=function(){ console.log(parentid); }, events = function(){ $(parentid).find('a').on('click',function(ev){ ev.preventDefault(); var atag = $(this), childsub = atag.next(vars.listsub); //console.log(atag.text()); if(childsub && opt.multipletab == true){ if(childsub.hasClass(vars.showclass)){ childsub.removeClass(vars.showclass).slideUp(500); }else{ childsub.addClass(vars.showclass).slideDown(500); } } if(childsub && opt.multipletab == false){ childsub.siblings(vars.listsub).removeClass(vars.showclass).slideUp(500); if(childsub.hasClass(vars.showclass)){ childsub.removeClass(vars.showclass).slideUp(500); }else{ childsub.addClass(vars.showclass).slideDown(500); } } }); }, init=function(options){//initials if(options){ opt = options; parentid = '#'+options.id; //test(); events(); }else{ alert('no options'); } } return {init:init}; })(); multisidetabs.init({ "id":"mg-multisidetabs", "multipletab":false }); })