"Nav Sidebar With Toggle Button"
Bootstrap 3.1.0 Snippet by SnehaKK

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <head> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> </head> <div class="container"> <div class="row"> <div class="col-sm-4 col-md-3 sidebar control"> <div class="mini-submenu"> <span> <span class="fa fa-bar icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </span> </div> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel-heading list-group-item active" > <span>Report Options <span class="pull-right" id="slide-submenu"><i class="fa fa-times"></i></span> </span> </div> <div class="panel-body main-panel-body"> <div class="panel panel-default panel-info"> <div class="panel-heading detail-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Data Source</a></h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body inpanel-body">Choose a table:</div> </div> </div> <div class="panel panel-default panel-success"> <div class="panel-heading detail-heading" role="tab" id="headingTwo"> <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="true" href="#collapseTwo" aria-controls="collapseTwo">Details</a></h4> </div> <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body inpanel-body">Start Time, Compute, Filters, </div> </div> </div> <div class="panel panel-default panel-warning"> <div class="panel-heading detail-heading" role="tab" id="headingThree"> <h4 class="panel-title"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">Formatting</a></h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body inpanel-body">Visualization.... the panel body goes here. <div id="formattingTab" role="tabpanel" class="tab-pane west-south pane properties-container active"> <!-- Formatting/ PROPERTIES tab --> <div class="properties-panel" style="left: 596px; top: 257px; width: 208px; height: 91px;"> <div> <select id="properties-names" class="btn btn-primary btn-xs select-btn-dropdown"><option value="report">Visualization</option><option value="title">Title</option><option value="container">Row Heat Map</option><option value="column-formula-1423156508119">Profile variable: Sum of Call Count</option></select> <div id="properties-details"><div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" id="gbox_" dir="ltr" style="width: 193px;"><div class="ui-widget-overlay jqgrid-overlay" id="lui_"></div><div class="loading ui-state-default ui-state-active" id="load_" style="display: none;">undefined</div><div class="ui-jqgrid-view" id="gview_" style="width: 193px;"><div class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix" style="display: none;"><a role="link" href="javascript:void(0)" class="ui-jqgrid-titlebar-close HeaderButton" style="right: 0px;"><span class="ui-icon ui-icon-circle-triangle-n"></span></a><span class="ui-jqgrid-title"></span></div><div class="ui-state-default ui-jqgrid-hdiv" style="width: 193px;"><div class="ui-jqgrid-hbox"><table class="ui-jqgrid-htable" style="width: 193px;" role="grid" aria-labelledby="gbox_" cellspacing="0" cellpadding="0" border="0"><thead><tr class="ui-jqgrid-labels" role="rowheader"><th id="_name" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 97px;"><span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;"> </span><div id="jqgh__name" class="ui-jqgrid-sortable">name<span class="s-ico" style="display:none"><span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></div></th><th id="_value" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 96px;"><span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;"> </span><div id="jqgh__value" class="ui-jqgrid-sortable">value<span class="s-ico" style="display:none"><span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></div></th></tr></thead></table></div></div><div class="ui-jqgrid-bdiv" style="height: 26px; width: 193px;"><div style="position:relative;"><div></div><table tabindex="0" cellspacing="0" cellpadding="0" border="0" role="grid" aria-multiselectable="false" aria-labelledby="gbox_" class="ui-jqgrid-btable" style="width: 193px;"><tbody><tr class="jqgfirstrow" role="row" style="height:auto"><td role="gridcell" style="height: 0px; width: 97px;"></td><td role="gridcell" style="height: 0px; width: 96px;"></td></tr><tr role="row" id="_dg0" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr"><td role="gridcell" style="" title="Name" aria-describedby="_name">Name</td><td role="gridcell" style="" title="Compound_30minLookback" aria-describedby="_value">Compound_30minLookback</td></tr><tr role="row" id="_dg1" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr"><td role="gridcell" style="" title="Back Color" aria-describedby="_name">Back Color</td><td role="gridcell" style="" title="" aria-describedby="_value"> </td></tr></tbody></table></div></div></div><div class="ui-jqgrid-resize-mark" id="rs_m"> </div></div></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
.mini-submenu{ display:none; background-color: rgba(0, 0, 0, 0); border: 3px solid rgba(247, 207, 64, 0.9); border-radius: 4px; padding: 9px; /*position: relative;*/ width: 42px; } /*rgba(147, 140, 171, 0.9) */ .panel-group { border: 3px solid rgba(247, 207, 64, 0.9); } .inpanel-body { max-height: 300px; overflow-y:scroll; } .control{ width:auto; } .mini-submenu:hover{ cursor: pointer; } .mini-submenu .icon-bar { border-radius: 1px; display: block; height: 2px; width: 22px; margin-top: 3px; } .mini-submenu .icon-bar { background-color: #000; } #slide-submenu{ background: rgba(0, 0, 0, 0.45); display: inline-block; padding: 0 8px; border-radius: 4px; cursor: pointer; }
$(function(){ $('#slide-submenu').on('click',function() { $(this).closest('.panel-group').fadeOut('slide',function(){ $('.mini-submenu').fadeIn(); }); }); $('.mini-submenu').on('click',function(){ $(this).next('.panel-group').toggle('slide'); $('.mini-submenu').hide(); }) $('.panel-group .panel-heading .detail-heading').click(function() { $(this).next().toggle('slow'); return false; }).next().hide(); })

Related: See More


Questions / Comments: