<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="jumbotron">
<h1 align="center">Dynamic Reports</h1>
<p align="center">sentence can be typed later</p>
</div>
</div>
<!-- table -->
<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><b>PLAIN_TEXT</b></span><span class="glyphicon glyphicon-menu-right mg-icon pull-right"></span></a>
<div class="panel list-sub">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
column11
<div class="material-switch pull-right">
<input id="someSwitchOptionDefault" name="someSwitchOption001" type="checkbox"/>
<label for="someSwitchOptionDefault" class="label-default"></label>
</div>
<li class="list-group-item">
column12
<div class="material-switch pull-right">
<input id="someSwitchOptionsuccess" name="someSwitchOption001" type="checkbox"/>
<label for="someSwitchOptionsuccess" class="label-success"></label>
</div>
<li class="list-group-item">
column13
<div class="material-switch pull-right">
<input id="someSwitchOptionprimary" name="someSwitchOption001" type="checkbox"/>
<label for="someSwitchOptionprimary" class="label-primary"></label>
</div>
<li class="list-group-item">
column14
<div class="material-switch pull-right">
<input id="someSwitchOptioninfo" name="someSwitchOption001" type="checkbox"/>
<label for="someSwitchOptioninfo" class="label-info"></label>
</div>
</ul>
</div>
</div>
<a href="#" class="list-group-item"><span><b>PHONETIC_TEXT</b></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">
<input type="checkbox" id="column" value="column1"><label for="column"> column 21</label><br>
<input type="checkbox" id="column" value="column2"><label for="column"> column 22</label><br>
<input type="checkbox" id="column" value="column3"><label for="column"> column 23</label><br>
<input type="checkbox" id="column" value="column4"><label for="column"> column 24</label><br>
</div>
</div>
</div>
<a href="#" class="list-group-item"><span><b>PHONETIC_TEXT_HOLDING</b></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">
<input type="checkbox" id="column" value="column1"><label for="column"> column31</label><br>
<input type="checkbox" id="column" value="column2"><label for="column"> column32</label><br>
<input type="checkbox" id="column" value="column3"><label for="column"> column33</label><br>
<input type="checkbox" id="column" value="column4"><label for="column"> column34</label><br>
</div>
</div>
</div>
<a href="#" class="list-group-item"><span><b>NAME_ORIGIN</b></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">
<input type="checkbox" id="column" value="column1"><label for="column"> column41</label><br>
<input type="checkbox" id="column" value="column2"><label for="column"> column42</label><br>
<input type="checkbox" id="column" value="column3"><label for="column"> column43</label><br>
<input type="checkbox" id="column" value="column4"><label for="column"> column44</label><br>
</div>
</div>
</div>
<a href="#" class="list-group-item"><span><b>GEO_QUALIFIER</b></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">
<input type="checkbox" id="column" value="column1"><label for="column"> column51</label><br>
<input type="checkbox" id="column" value="column2"><label for="column"> column52</label><br>
<input type="checkbox" id="column" value="column3"><label for="column"> column53</label><br>
<input type="checkbox" id="column" value="column4"><label for="column"> column54</label><br>
</div>
</div>
</div>
<a href="#" class="list-group-item"><span><b>AUDIT_ASSIGNMENT</b></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">
<input type="checkbox" id="column" value="column1"><label for="column"> column61</label><br>
<input type="checkbox" id="column" value="column2"><label for="column"> column62</label><br>
<input type="checkbox" id="column" value="column3"><label for="column"> column63</label><br>
<input type="checkbox" id="column" value="column4"><label for="column"> column64</label><br>
</div>
</div>
</div>
<a href="#" class="list-group-item"><span><b>AUDIT_ASSIGNMENT_DETAIL</b></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">
<input type="checkbox" id="column" value="column1"><label for="column"> column71</label><br>
<input type="checkbox" id="column" value="column2"><label for="column"> column72</label><br>
<input type="checkbox" id="column" value="column3"><label for="column"> column73</label><br>
<input type="checkbox" id="column" value="column4"><label for="column"> column74</label><br>
</div>
</div>
</div>
</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>
<!--submit button -->
<div class="container" style ="text-align:center">
<p id ="demo"> press submit to process your request</p>
<button type="submit" class="btn btn-success" value="Submit Button" onclick= "check()" > Submit Request</button>
</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;
}
/*material-switch*/
.material-switch > input[type="checkbox"] {
display: none;
}
.material-switch > label {
cursor: pointer;
height: 0px;
position: relative;
width: 40px;
}
.material-switch > label::before {
background: rgb(0, 0, 0);
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
content: '';
height: 16px;
margin-top: -8px;
position:absolute;
opacity: 0.3;
transition: all 0.4s ease-in-out;
width: 40px;
}
.material-switch > label::after {
background: rgb(255, 255, 255);
border-radius: 16px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
content: '';
height: 24px;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
transition: all 0.3s ease-in-out;
width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
background: inherit;
opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
background: inherit;
left: 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
});
})
function check(){
document.getElementById('demo').innerHTML = 'Request Processing :)';
}
