"MY PROJECT"
Bootstrap 3.3.0 Snippet by ykolla

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#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*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Now UI Kit PRO

Questions / Comments: