"MY PROJECT"
Bootstrap 3.3.0 Snippet by ykolla

<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 :)'; }

Related: See More


Questions / Comments: