CodeKhel

<div class="container">   <!-- <h2> check first checkbox </h2> -->   <form>     <label class="checkbox-inline">       <input type="checkbox"  value="1" name="state">State     </label>     <label class="checkbox-inline">       <input type="checkbox" value="2" name="district">District     </label>     <label class="checkbox-inline">       <input type="checkbox" value="3" name="Police_station">Police Station     </label>   </form> </div> <script> $('[type="checkbox"]:gt(0)').on('click', () => $('[type="checkbox"]:eq(0)').prop('checked', $('[type="checkbox"]:gt(0)').is(':checked'))); </script> //or <script> var $firstCb = $("input:checkbox...

<div class=" treeview-menu menu-open "  >  User Menu </div> Issue: To get the combination of two classes " treeview-menu   " and  " menu-open " , we have to call like this: Solution: div .treeview-menu.menu-open{   background-color:#f00;  color:#000 } Notice: There is no single space between both classes.

<script type="text/javascript">  $(window).on('load',function(){     var ctntHeight = $("#contentBox").outerHeight();     $("#sidebar").css('min-height', ctntHeight);   });

When user click on the menu, page is reloaded and at that time current-active-menu  removed from the anchor tag(<a>). Paste below Jquery code in your header or footer file. This script is working OK  for Admin LTE2  treeview(submenu) sidebar  ==>  /** add active class and stay opened when selected */  $(window).on('load', function(){                                                                   // remember we are using secure token in our url, so firstly                                                                         we have to split and filter the url as we want var addr1 =$(...

download

ReadMore and ReadLess Jquery Script ==> Tested   <style>  .morecontent span {     display: none; } .morelink {     display: block; }   </style>   <script>        $(document).ready(function() {     // Configure/customize these variables.     var showChar = 100;  // How many characters are shown by default     var ellipsestext = "...";     var moretext = "Show more >";     var lesstext = "Show less";          $('.more').each(function() {         var content = $(this).html();         if(content.length > showChar) {             var c = content.substr(0, showChar);             var h = content.substr(showChar, content.length - showChar);         ...

 HTML==> <fieldset class="scheduler-border"> <legend class="scheduler-border">Search by Offender Details</legend> <div class="col-md-12"> <p> This is just test. </p> </div> </fieldset>  CSS==> <style> /* fieldset Css starts*/ fieldset.scheduler-border {     border: 1px groove #ddd !important;     padding: 0 1.4em 1.4em 1.4em !important;     margin: 0 0 1.5em 0 !important;     -webkit-box-shadow:  0px 0px 0px 0px #000;      box-shadow:  0px 0px 0px 0px #000; } legend.scheduler-border {     font-size: 1.2em !important;     font-weight: bold !important;     text-align: left !important;     width:auto;     padding:0 10px;     border-bottom:none; } /* end of fieldset Css*/ </style>