<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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <style> .well { background-color: #ffffff; border: 1px solid #ffffff; box-shadow: #cacaca -1px 2px 4px 1px; } .widget-content { padding: 15px; box-shadow: #cacaca -1px 2px 4px 1px; } ul.nav.nav-pills.nav-stacked.admin-menu { background: #fff; box-shadow: #cacaca -1px 2px 4px 1px; } ul.nav.nav-pills.nav-stacked.admin-menu li a { padding: 10px 0px 10px 10px; font-size: 16px; } .lelo{ width: 33%; float: left; text-align:right; } .righto{ width: 65%; float: left; } .block-title{ background-color:#5ccdde; color:#fff; } .widget-content { padding: 2px; box-shadow: #cacaca -1px 2px 4px 1px; } .widget-content.widget-content-mini { padding-top:0px; padding-bottom: 0px; } .widget-icon{ border-radius: 0%; } .widget-icon.pull-left { margin: 2px; } @media only screen and (max-width: 600px) { .well { background-color: #ffffff; border: 1px solid #ffffff; margin-top: 13px; } .lelo{ width: 100%; text-align:left; float: left; } .righto{ width: 100%; float: left; } } </style> <div id="page-content"> <div class="block full"> <div class="row"> <div class="col-12 col-md-2"> <ul class="nav nav-pills nav-stacked admin-menu"> <li class="active"><a href="#" data-target-id="patient">Patients Details </a></li> <li><a href="#" data-target-id="Rent">Rent</a></li> <li><a href="#" data-target-id="Demo">Demo</a></li> <li><a href="#" data-target-id="Appointment">Appointment</a></li> <li><a href="#" data-target-id="Payment">Payment</a></li> <li><a href="#" data-target-id="Proposal">Proposal </a></li> </ul> </div> <div class="col-xs-12 col-md-10 well admin-content" id="patient"> <div class="block-title"> <h2><strong>Patient Details</strong> </h2> </div> <div class="col-md-6 col-xs-12"> <div class="lelo"> <div ><h5>Patients Name: </h5></div> </div> <div class="righto"> <h5> <strong>Demo name</strong></h5> </div> </div> <div class="col-md-6 col-xs-12"> <div class="lelo"> <div ><h5>Email:  </h5></div> </div> <div class="righto"> <h5> <strong> info@gmail.com</strong></h5> </div> </div> <div class="col-md-6 col-xs-12"> <div class="lelo"> <div ><h5>Phone Number:  </h5></div> </div> <div class="righto"> <h5> <strong> 7894561230</strong></h5> </div> </div> <div class="col-md-6 col-xs-12"> <div class="lelo"> <div ><h5>Alternate Number: </h5></div> </div> <div class="righto"> <h5> <strong>7894561230</strong></h5> </div> </div> <div class="col-md-6 col-xs-12"> <div class="lelo"> <div ><h5>Address: </h5></div> </div> <div class="righto"> <h5> <strong>Salt lake city,kolkata</strong></h5> </div> </div> <div class="col-md-6 col-xs-12"> <div class="lelo"> <div ><h5>Pin Code: </h5></div> </div> <div class="righto"> <h5> <strong>700017</strong></h5> </div> </div> </div> <div class="col-xs-12 col-md-10 well admin-content" id="Rent"> <div class="block-title"> <h2><strong>Rent Details</strong> </h2> </div> <div class="table-responsive"> <table id="example-datatable" class="table table-striped table-hover table-vcenter"> <thead> <tr> <th class="text-center" style="width: 50px;">Sl. No.</th> <th>Name</th> <th>Mobile</th> <th>Email </th> <th>Created On</th> <th class="text-center" style="width: 75px;"><i class="fa fa-flash"></i></th> </tr> </thead> <tbody> <tr> <td class="text-center">1</td> <td><strong>cdcdcd</strong></td> <td>323233232323</td> <td>kjk@hhhg.com</td> <td>21-4-2020</td> <td class="text-center"> 55 </td> </tr> </tbody> </table> </div> </div> <div class="col-xs-12 col-md-10 well admin-content" id="Demo"> DemoDemoDemoDemoDemoDem </div> <div class="col-xs-12 col-md-10 well admin-content" id="Appointment"> Appointment sdsddsdsdsdsds </div> <div class="col-xs-12 col-md-10 well admin-content" id="Payment"> Payment </div> <div class="col-xs-12 col-md-10 well admin-content" id="Proposal"> Proposal </div> </div> </div> <script> </script> <!--top bar--> <!--body--> </div>

$(document).ready(function() { var navItems = $('.admin-menu li > a'); var navListItems = $('.admin-menu li'); var allWells = $('.admin-content'); var allWellsExceptFirst = $('.admin-content:not(:first)'); allWellsExceptFirst.hide(); navItems.click(function(e) { e.preventDefault(); navListItems.removeClass('active'); $(this).closest('li').addClass('active'); allWells.hide(); var target = $(this).attr('data-target-id'); $('#' + target).show(); }); });