<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();
})