EVOLUTION-NINJA
Edit File: access-rights-1.html
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Swan Silk</title> <link rel="stylesheet" type="text/css" href="css/avinash.css"> <link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" /> <link rel="stylesheet" type="text/css" href="css/responsive.css"> <link rel="stylesheet" type="text/css" href="css/skin-blue.css"> <link rel='shortcut icon' type='image/x-icon' href="images/samll-big.png"/> <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/app.min.js"></script> </head> <body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper"> <header class="main-header"> <a href="index2.html" class="logo"> <span class="logo-mini"><img src="images/samll-big.png"></span> <span class="logo-lg"><img src="images/logo-big.png"></span> </a> <nav class="navbar navbar-static-top"> <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button"> <span class="sr-only">Toggle navigation</span> </a> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <li class="dropdown user user-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img src="images/img/user2-160x160.jpg" class="user-image" alt="User Image"> <span class="hidden-xs">Alexander Pierce</span> </a> <ul class="dropdown-menu"> <li class="user-header"> <img src="images/img/user2-160x160.jpg" class="img-circle" alt="User Image"> <p>Alexander Pierce - Web Developer <small>Member since Nov. 2012</small> </p> </li> <!-- Menu Body --> <li class="user-footer"> <div class="pull-left"> <a href="#" class="btn btn-default btn-flat">Profile</a> </div> <div class="pull-right"> <a href="#" class="btn btn-default btn-flat">Sign out</a> </div> </li> </ul> </li> <!--<li> <a data-toggle="control-sidebar">I</a> </li> <li> <a href="#" data-toggle="control-sidebar"><i class="fa fa-sign-out"></i> Sign Out</a> </li>--> </ul> </div> </nav> </header> <!--------------------------------------------- header---------------------------------------------------------------------------------> <aside class="main-sidebar"> <section class="sidebar"> <ul class="sidebar-menu"> <li class="dashb"><a href="#"><i class="fa fa-tachometer fa-lg" aria-hidden="true"></i><span>Dashboard</span></a></li> </ul> </section> <!--- section ----> </aside> <!--- aside ----> <!------------- left-side menu END -----------------------------------------------------------------------------------------------------> <div class="content-wrapper"> <section class="content-header"> <h1> <i class="fa fa-user" aria-hidden="true"></i> Access Rights </h1> </section> <!--- section 1 ---> <section class="content"> <div class="col-sm-12 col-md-12"> <form id="land_owner" class="form-inline"> <div class="row owner_access"> <div class="form-group col-sm-12 " style="text-align:center;"> <label class="radio-inline"> <input type="radio" name="optradio">Option 1 </label> <label class="radio-inline"> <input type="radio" name="optradio">Option 2 </label> </div> </div> <!-- row 1---> <div class="row owner_access"> <div class="form-group col-sm-12"> <label class="control-label col-sm-4 col-sm-offset-2 col-md-2 col-md-offset-4">Select Category: </label> <div class="col-sm-6 col-md-6"> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </div> </div> </div> <!-- row 2 ---> <div class="row owner_access"> <div class="form-group col-sm-12 col-md-10 "> <p>Menu</p> <div class="checkbox"> <label><input type="checkbox" value="">Check All</label> </div> </div> <div class="col-sm-0 col-md-2"></div> </div> <!-- row 3---> <div class="row owner_access"> <div class="col-sm-12 col-md-10"> <table class="table access-table"> <tr class="bg-grey"> <td style="text-align:center;width: 26px;">SI#</td> <td style="text-align:center;" class="access-border">Menu Name</td> <td style="text-align:center;width: 30px;">Add</td> </tr> <tr class="bg-silvery"> <td>1</td> <td class="access-border">xyz</td> <td style="text-align:center;"><input type="checkbox" value=""></td> </tr> <!------> <tr class="bg-grey"> <td class="icon-plus"><a href="#" class="acce-toggle"><i class="fa fa-plus" aria-hidden="true"></i></a></td> <td colspan="2">Staffs 1</td> </tr> <tr class="bg-silvery sub-toggle"> <td>2</td> <td class="access-border">xyz</td> <td style="text-align:center;"><input type="checkbox" value=""></td> </tr> <tr class="sub-toggle"> <td>3</td> <td class="access-border">xyz</td> <td style="text-align:center;"><input type="checkbox" value=""></td> </tr> <!------> <tr class="bg-grey" id="rowToClick"> <td class="icon-plus"><a href="#" class="acce-toggle"><i class="fa fa-plus" aria-hidden="true"></i></a></td> <td colspan="2">Staffs 2</td> </tr> <tr class="bg-silvery sub-toggle"> <td>4</td> <td class="access-border">xyz</td> <td style="text-align:center;"><input type="checkbox" value=""></td> </tr> <tr class="sub-toggle"> <td>5</td> <td class="access-border">xyz</td> <td style="text-align:center;"><input type="checkbox" value=""></td> </tr> <!------> <tr class="bg-grey" id="rowToClick"> <td class="icon-plus"><a href="#" class="acce-toggle"><i class="fa fa-plus" aria-hidden="true"></i></a></td> <td colspan="2">Staffs 3</td> </tr> <tr class="bg-silvery sub-toggle"> <td>6</td> <td class="access-border">xyz</td> <td style="text-align:center;"><input type="checkbox" value=""></td> </tr> <tr class="sub-toggle"> <td>7</td> <td class="access-border">xyz</td> <td style="text-align:center;"><input type="checkbox" value=""></td> </tr> <!------> <tr class="bg-grey"> <td class="icon-plus"><a href="#" class="acce-toggle"><i class="fa fa-plus" aria-hidden="true"></i></a></td> <td colspan="2">Staffs 4</td> </tr> <tr class="bg-silvery sub-toggle"> <td>8</td> <td class="access-border">xyz</td> <td style="text-align:center;"><input type="checkbox" value=""></td> </tr> <tr class="sub-toggle"> <td>9</td> <td class="access-border">xyz</td> <td style="text-align:center;"><input type="checkbox" value=""></td> </tr> <tr class="bg-silvery sub-toggle"> <td>10</td> <td class="access-border">xyz</td> <td style="text-align:center;"><input type="checkbox" value=""></td> </tr> <tr class="sub-toggle"> <td>11</td> <td class="access-border">xyz</td> <td style="text-align:center;"><input type="checkbox" value=""></td> </tr> <tr class="bg-silvery sub-toggle"> <td>12</td> <td class="access-border">xyz</td> <td style="text-align:center;"><input type="checkbox" value=""></td> </tr> <tr class="sub-toggle"> <td>13</td> <td class="access-border">xyz</td> <td style="text-align:center;"><input type="checkbox" value=""></td> </tr> <tr class="bg-silvery sub-toggle"> <td>14</td> <td class="access-border">xyz</td> <td style="text-align:center;"><input type="checkbox" value=""></td> </tr> <!------> <tr class="bg-grey"> <td class="icon-plus"><a href="#" class="acce-toggle"><i class="fa fa-plus" aria-hidden="true"></i></a></td> <td colspan="2">Staffs 5</td> </tr> <tr class="sub-toggle"> <td>15</td> <td class="access-border">xyz</td> <td style="text-align:center;"><input type="checkbox" value=""></td> </tr> </table> </div> <div class="col-sm-0 col-md-2"></div> </div> <!-- row 4 ---> <div class="row owner_access"> <div class="col-sm-12 col-md-10"> <div class="col-sm-4 col-md-4"></div> <div class="col-sm-4 col-md-4"> <button type="button" class="btn center-block submit">Submit</button> </div> <div class="col-sm-4 col-md-4"></div> </div> <div class="col-sm-0 col-md-2"></div> </div> </form> <!---- form End ---------------------------------------------------------------------------------------------> <div class="row" style="padding-left:20px; padding-top:25px;"> JQ-Grid </div> </div> <!--- col-sm-8 ---> <div class="col-sm-0 col-md-3"></div> </section> <!--- section 2 ---> </div> <!--- content-wrapper ----> <!------------- content-wrapper END -----------------------------------------------------------------------------------------------------> </div> <!----- wrapper -----> </body> </html> <style> .skin-blue .wrapper, .skin-blue .left-side { background-color: #ffffff !important; } .skin-blue .main-sidebar { background-color: #e6e6e6 !important; } @media only screen and (min-width:641px) and (max-width:991px) { .form-group label{ padding-left:20px !important; } } .form-inline .checkbox input[type="checkbox"], .form-inline .radio input[type="radio"] { margin-right:10px; } </style> <script type="text/javascript"> $(".acce-toggle").click(function() { $(this).closest("tr").nextUntil("tr:not(.sub-toggle)").toggle(); }); </script>