"yashwanth"
Bootstrap 3.3.0 Snippet by ykolla

Post to Facebook Tweet this

<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"> <!-- table 1 --> <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"> <div class="list-group"> <input type="checkbox" id="PID" value="PID"><label for="PID"> PID</label><br> <form action="demo_form.asp"> <input type="checkbox" id="TEXT" value="TEXT"><label for="TEXT"> TEXT</label><input type="text" name="TEXT" value=""><br> </form> <form action="demo_form.asp"> <input type="checkbox" id="PHON_LANG" value="PHON_LANG"><label for="PHON_LANG"> PHON_LANG</label><input type="text" name="PHON_LANG" value=""><br> </form> <input type="checkbox" id="MOST_IMPORTANT_NAME" value="MOST_IMPORTANT_NAME"><label for="MOST_IMPORTANT_NAME"> MOST_IMPORTANT_NAME</label><br> <input type="checkbox" id="CREATION_DATE" value="CREATION_DATE"><label for="CREATION_DATE"> CREATION_DATE</label><br> <input type="checkbox" id="IS_STREET" value="IS_STREET"><label for="IS_STREET">IS_STREET</label><br> <input type="checkbox" id="IS_POI" value="IS_POI"><label for="IS_POI"> IS_POI</label><br> <input type="checkbox" id="IS_AREA" value="IS_AREA"><label for="IS_AREA"> IS_AREA</label><br> <input type="checkbox" id="IS_META" value="IS_META"><label for="IS_META"> IS_META</label><br> <form action="demo_form.asp"> <input type="checkbox" id="ORIGIN" value="ORIGIN"><label for="ORIGIN"> ORIGIN</label><input type="text" name="ORIGIN" value=""><br> </form> <input type="checkbox" id="IS_SIGN" value="IS_SIGN"><label for="IS_SIGN"> IS_SIGN</label><br> <input type="checkbox" id="IS_EXIT" value="IS_EXIT"><label for="IS_EXIT"> IS_EXIT</label><br> <input type="checkbox" id="IS_TRAFFIC" value="IS_TRAFFIC"><label for="IS_TRAFFIC">IS_TRAFFIC</label><br> <input type="checkbox" id="IS_NG" value="IS_NG"><label for="IS_NG"> IS_NG</label><br> <input type="checkbox" id="IS_CARTO" value="IS_CARTO"><label for="IS_CARTO"> IS_CARTO</label><br> <input type="checkbox" id="IS_MIXED_CASE" value="IS_MIXED_CASE"><label for="IS_MIXED_CASE">IS_MIXED_CASE</label><br> <input type="checkbox" id="IS_AIRPORT_SYNONYM" value="IS_AIRPORT_SYNONYM"><label for="IS_AIRPORT_SYNONYM">IS_AIRPORT_SYNONYM</label><br> <input type="checkbox" id="IS_TRANSIT" value="IS_TRANSIT"><label for="IS_TRANSIT"> IS_TRANSIT</label><br> <form action="demo_form.asp"> <input type="checkbox" id="NORMALIZED_TEXT" value="NORMALIZED_TEXT"><label for="NORMALIZED_TEXT"> NORMALIZED_TEXT</label><input type="text" name="NORMALIZED_TEXT" value=""><br> </form> <input type="checkbox" id="IS_EXT_SOURCE" value="IS_EXT_SOURCE"><label for="IS_EXT_SOURCE">IS_EXT_SOURCE</label><br> </div> </div> </div> <!-- table 2 --> <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="FID" value="FID"><label for="FID"> FID</label><br> <input type="checkbox" id="PID" value="PID"><label for="PID"> PID</label><br> <input type="checkbox" id="PHONETIC_STRING" value="PHONETIC_STRING"><label for="PHONETIC_STRING"> PHONETIC_STRING</label><br> <input type="checkbox" id="SPOKEN_TEXT" value="SPOKEN_TEXT"><label for="SPOKEN_TEXT"> SPOKEN_TEXT</label><br> <input type="checkbox" id="PREFERRED_FLAG" value="PREFERRED_FLAG"><label for="PREFERRED_FLAG"> PREFERRED_FLAG</label><br> <input type="checkbox" id="HAS_ERRORS" value="HAS_ERRORS"><label for="HAS_ERRORS"> HAS_ERRORS</label><br> <form action="demo_form.asp"> <input type="checkbox" id="SOURCE" value="SOURCE"><label for="SOURCE"> SOURCE</label><input type="text" name="SOURCE" value=""><br> </form> <form action="demo_form.asp"> <input type="checkbox" id="CREATION_DATE" value="CREATION_DATE"><label for="CREATION_DATE"> CREATION_DATE</label><input type="text" name="CREATION_DATE" value=""><br> </form> <form action="demo_form.asp"> <input type="checkbox" id="USERNAME" value="USERNAME"><label for="USERNAME"> USERNAME</label><input type="text" name="USERNAME" value=""><br> </form> <input type="checkbox" id="MODIFIED" value="MODIFIED"><label for="MODIFIED"> MODIFIED</label><br> <form action="demo_form.asp"> <input type="checkbox" id="PHONETIC_TYPE" value="PHONETIC_TYPE"><label for="PHONETIC_TYPE"> PHONETIC_TYPE</label><input type="text" name="PHONETIC_TYPE" value=""><br> </form> <input type="checkbox" id="HYBRID_PHONETIC_STRING" value="HYBRID_PHONETIC_STRING"><label for="HYBRID_PHONETIC_STRING"> HYBRID_PHONETIC_STRING</label><br> <form action="demo_form.asp"> <input type="checkbox" id="VERSION_NO" value="VERSION_NO"><label for="VERSION_NO"> VERSION_NO</label><input type="text" name="VERSION_NO" value=""><br> </form> <form action="demo_form.asp"> <input type="checkbox" id="MODIFIED_BY" value="MODIFIED_BY"><label for="MODIFIED_BY"> MODIFIED_BY</label><input type="text" name="MODIFIED_BY" value=""><br> </form> <input type="checkbox" id="MODIFIED_BY_TYPE" value="MODIFIED_BY_TYPE"><label for="MODIFIED_BY_TYPE"> MODIFIED_BY_TYPE</label><br> <input type="checkbox" id="MODIFIED_AT" value="MODIFIED_AT"><label for="MODIFIED_AT"> MODIFIED_AT</label><br> </div> </div> </div> <!-- table 3 --> <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="PHID" value="PHID"><label for="PHID"> PHID</label><br> <input type="checkbox" id="PID" value="PID"><label for="PID"> PID</label><br> <form action="demo_form.asp"> <input type="checkbox" id="COUNTRY" value="COUNTRY"><label for="COUNTRY"> COUNTRY</label><input type="text" name="COUNTRY" value=""><br> </form> <form action="demo_form.asp"> <input type="checkbox" id="MAP_LANGUAGE_CODE" value="MAP_LANGUAGE_CODE"><label for="MAP_LANGUAGE_CODE"> MAP_LANGUAGE_CODE</label><input type="text" name="MAP_LANGUAGE_CODE" value=""><br> </form> <form action="demo_form.asp"> <input type="checkbox" id="PHONETIC_STRING" value="PHONETIC_STRING"><label for="PHONETIC_STRING"> PHONETIC_STRING</label><input type="text" name="PHONETIC_STRING" value=""><br> </form> <form action="demo_form.asp"> <input type="checkbox" id="PHONETIC_STRING" value="PHONETIC_STRING"><label for="PHONETIC_STRING"> PHONETIC_STRING</label><input type="text" name="PHONETIC_STRING" value=""><br> </form> <input type="checkbox" id="PREFERRED_FLAG" value="PREFERRED_FLAG"><label for="PREFERRED_FLAG"> PREFERRED_FLAG</label><br> <input type="checkbox" id="HAS_ERRORS" value="HAS_ERRORS"><label for="HAS_ERRORS"> HAS_ERRORS</label><br> <input type="checkbox" id="SOURCE" value="SOURCE"><label for="SOURCE"> SOURCE</label><br> <form action="demo_form.asp"> <input type="checkbox" id="SOURCE" value="SOURCE"><label for="SOURCE"> CREATION_DATE</label><input type="text" name="SOURCE" value=""><br> </form> <form action="demo_form.asp"> <input type="checkbox" id="USERNAME" value="USERNAME"><label for="USERNAME"> USERNAME</label><input type="text" name="USERNAME" value=""><br> </form> <input type="checkbox" id="MODIFIED" value="MODIFIED"><label for="MODIFIED"> MODIFIED</label><br> <input type="checkbox" id="PHONETIC_TYPE" value="PHONETIC_TYPE"><label for="PHONETIC_TYPE"> PHONETIC_TYPE</label><br> <input type="checkbox" id="AUDIT_FLAG" value="AUDIT_FLAG"><label for="AUDIT_FLAG"> AUDIT_FLAG</label><br> <input type="checkbox" id="JOB_ID" value="JOB_ID"><label for="JOB_ID"> JOB_ID</label><br> <form action="demo_form.asp"> <input type="checkbox" id="VERSION_NO" value="VERSION_NO"><label for="VERSION_NO"> VERSION_NO</label><input type="text" name="VERSION_NO" value=""><br> </form> <input type="checkbox" id="MODIFIED_BY" value="MODIFIED_BY"><label for="MODIFIED_BY"> MODIFIED_BY</label><br> <input type="checkbox" id="MODIFIED_BY_TYPE" value="MODIFIED_BY_TYPE"><label for="MODIFIED_BY_TYPE"> MODIFIED_BY_TYPE</label><br> <input type="checkbox" id="MODIFIED_AT" value="MODIFIED_AT"><label for="MODIFIED_AT"> MODIFIED_AT</label><br> <input type="checkbox" id="HIGH_PRIORITY" value="HIGH_PRIORITY"><label for="HIGH_PRIORITY"> HIGH_PRIORITY</label><br> <input type="checkbox" id="ERRORS" value="ERRORS"><label for="ERRORS"> ERRORS</label><br> <input type="checkbox" id="ORIGINAL_PHONETIC" value="ORIGINAL_PHONETIC"><label for="ORIGINAL_PHONETIC"> ORIGINAL_PHONETIC</label><br> </div> </div> </div> <!-- table 4 --> <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"> ID</label><br> <input type="checkbox" id="column" value="column2"><label for="column"> PID</label><br> <form action="demo_form.asp"> <input type="checkbox" id="SOURCE" value="SOURCE"><label for="SOURCE"> DNDC_LANG</label><input type="text" name="SOURCE" value=""><br> </form> <form action="demo_form.asp"> <input type="checkbox" id="SOURCE" value="SOURCE"><label for="SOURCE"> COUNTRY</label><input type="text" name="SOURCE" value=""><br> </form> </div> </div> </div> <!-- table 5 --> <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"> GID</label><br> <input type="checkbox" id="column" value="column2"><label for="column"> FID</label><br> <form action="demo_form.asp"> <input type="checkbox" id="SOURCE" value="SOURCE"><label for="SOURCE"> POSTAL_CODE</label><input type="text" name="SOURCE" value=""><br> </form> <input type="checkbox" id="column" value="column3"><label for="column"> AREA_ID</label><br> <input type="checkbox" id="column" value="column4"><label for="column"> ZONE_ID</label><br> <form action="demo_form.asp"> <input type="checkbox" id="SOURCE" value="SOURCE"><label for="SOURCE"> CREATION_DATE</label><input type="text" name="SOURCE" value=""><br> </form> </div> </div> </div> <!-- table 6 --> <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"> AA_ID</label><br> <input type="checkbox" id="column" value="column2"><label for="column"> JOB_ID</label><br> <form action="demo_form.asp"> <input type="checkbox" id="SOURCE" value="SOURCE"><label for="SOURCE"> NAME</label><input type="text" name="SOURCE" value=""><br> </form> <input type="checkbox" id="column" value="column3"><label for="column"> EXPERT_ID</label><br> <input type="checkbox" id="column" value="column4"><label for="column"> ASSIGNED_AT</label><br> <input type="checkbox" id="column" value="column4"><label for="column"> COMPLETED_AT</label><br> <input type="checkbox" id="column" value="column4"><label for="column"> STATUS</label><br> <input type="checkbox" id="column" value="column4"><label for="column"> REMARKS</label><br> <form action="demo_form.asp"> <input type="checkbox" id="SOURCE" value="SOURCE"><label for="SOURCE"> COUNTRY</label><input type="text" name="SOURCE" value=""><br> </form> </div> </div> </div> <!-- table 7 --> <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"> AAA_ID</label><br> <input type="checkbox" id="column" value="column2"><label for="column"> AA_ID</label><br> <input type="checkbox" id="column" value="column3"><label for="column"> PHID</label><br> <input type="checkbox" id="column" value="column4"><label for="column"> AUDIT_CODE</label><br> <input type="checkbox" id="column" value="column4"><label for="column"> CORRECTED_PHONETIC</label><br> <input type="checkbox" id="column" value="column4"><label for="column"> AUDITED_AT</label><br> <form action="demo_form.asp"> <input type="checkbox" id="SOURCE" value="SOURCE"><label for="SOURCE"> AUDITED_BY</label><input type="text" name="SOURCE" value=""><br> </form> <form action="demo_form.asp"> <input type="checkbox" id="SOURCE" value="SOURCE"><label for="SOURCE"> NAME_TYPE</label><input type="text" name="SOURCE" value=""><br> </form> <form action="demo_form.asp"> <input type="checkbox" id="SOURCE" value="SOURCE"><label for="SOURCE"> COUNTRY</label><input type="text" name="SOURCE" value=""><br> </form> <input type="checkbox" id="column" value="column4"><label for="column"> FID</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; }
$(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

Vue Argon Design System

Questions / Comments: