<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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-12 col-md-12"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="navbar-brand">{{UMT Logo}}</li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Parts</a></li> <li><a href="#">Pre-Delivery</a></li> <li><a href="#">Sales</a></li> <li><a href="#">Service</a></li> <li><a href="#">Support Services</a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> </div> </div> <div class="row"> <div class="col-sm-10 col-md-12"> <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Parts</a></li> <li><a href="#">Genuine Parts</a></li> <li class="active">Toyota</li> </ol> </div> </div> <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 href="#collapseOne">Parts</a></h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div id="MainMenu"> <div class="list-group panel"> <a href="#demo3" class="list-group-item list-group-item-heading" data-toggle="collapse" data-parent="#MainMenu">Genuine Parts <i class="glyphicon glyphicon-chevron-down"></i></a> <div class="collapse" id="demo3"> <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Toyota  (3 vendors)</a> <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Holden</a> <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Ford</a> <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Subaru</a> <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Mitsubishi</a> <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Hyundai</a> <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Volkswagen</a> <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Nissan</a> </div> <a href="#demo1" class="list-group-item list-group-item-heading" data-toggle="collapse" data-parent="#MainMenu">Body (Exterior-Interior) <i class="glyphicon glyphicon-chevron-down"></i></a> <div class="collapse" id="demo1"> <a href="#SubSubMenu1" class="list-group-item list-group-item-heading" data-toggle="collapse" data-parent="#SubSubMenu1">Exterior  <i class="glyphicon glyphicon-chevron-down"></i></a> <div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1"> <a href="#" class="list-group-item" data-parent="#SubMenu1">Windscreens</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Panels</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Wheels/Tyres</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Locks/Keys</a> </div> <a href="#SubSubMenu2" class="list-group-item list-group-item-heading" data-toggle="collapse" data-parent="#SubSubMenu1">Interior  <i class="glyphicon glyphicon-chevron-down"></i></a> <div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu2"> <a href="#" class="list-group-item" data-parent="#SubMenu1">Trim / Seat Covers</a> </div> </div> </div> </div> </div> </div> </div> </div> <div class="col-sm-9 col-md-9"> <div class="row"> <div class="col-md-12"> <p></p> </div> <div class="col-md-12"> <form class="form-inline" role="search"> <div class="form-group"> <select class="btn btn-default"> <option class="btn btn-default">Limit to Toyota </option> <option class="btn btn-default">Search All </option> </select> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Search Products / Services" /> </div> <div class="form-group"> <select class="btn btn-default"> <option class="btn btn-default">All dealerships </option> <option class="btn btn-default">Kalamanda </option> <option class="btn btn-default">Perth </option> </select> </div> <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button> </form> </div> </div> <div class="row"> <p></p> <div class="col-md-12"> <p></p> <p>Vendors for Toyota (Showing 1-6 of 6)</p> </div> <div class="col-md-12"> <table class="table table-condensed table-striped table-bordered"> <thead> <th>Product / Service</th> <th>Supplier</th> <th>Vendor Number</th> <th>Dealership</th> <th>Vendor Comments</th> </thead> <tr> <td>Toyota</td> <td>New Rag Suppliers </td> <td>10123</td> <td>Kalamanda</td> <td>Comments</td> </tr> <tr> <td>Toyota</td> <td>New Rag Suppliers </td> <td>10123</td> <td>Kalamanda</td> <td>Comments</td> </tr> <tr> <td>Toyota</td> <td>New Rag Suppliers </td> <td>10123</td> <td>Kalamanda</td> <td>Comments</td> </tr> <tr> <td>Toyota</td> <td>New Rag Suppliers </td> <td>10123</td> <td>Kalamanda</td> <td>Comments</td> </tr> <tr> <td>Toyota</td> <td>New Rag Suppliers </td> <td>10123</td> <td>Kalamanda</td> <td>Comments</td> </tr> <tr> <td>Toyota</td> <td>New Rag Suppliers </td> <td>10123</td> <td>Kalamanda</td> <td>Comments</td> </tr> </table> <ul class="pagination"> <li class="disabled"><a href="#"><<</a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> <li class="disabled"><a href="#">>></a></li> </ul> </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;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;border-bottom: 0;padding-left: 30px;}