Step1:

We have already have the script for the Side - navigation and toggle effect...

We faced a problem,, when selecting  the particular item it should be highlight on current item,
What we did was .... giving the class name active  to respected pages (statically)...

Step2:

As of all the menus are static... we have to  highlight the active class on clicking...

so i have added the hand code jquery script and highlighted the items....

Step3:

HTML COde:

 <section style="height: auto;" class="sidebar">       
      <!-- sidebar menu div starts here -->
      <ul class="sidebar-menu">
        <li><a href="#"><i class="fa fa-calendar"></i> <span>Inspections Schedule</span></a></li>
        <li class="treeview"> <a href="#"> <i class="fa fa-pencil-square-o"></i> <span>Inspection Forms</span> <i class="fa fa-angle-left pull-right"></i> </a>
          <ul style="display: none;" class="treeview-menu">
            <li><a href="#">Add Templates </a></li>
            <li><a href="#">View Form Templates </a></li>
             <li><a href="#"> View Submitted Forms</a></li>
          </ul>
        </li>
        <li class="treeview"> <a href="#"> <i class="fa fa-user"></i> <span>Manage User</span> <i class="fa fa-angle-left pull-right"></i> </a>
          <ul style="display: none;" class="treeview-menu">
             <li><a href="#">View Users</a></li>
            <li><a href="#">Add Users</a></li>
            <li ><a href="#"> User Roles</a></li>
          </ul>
        </li>
        <li><a href="#"><i class="fa fa-book"></i> <span>Reports</span></a></li>
      </ul>
    </section>

Step4:

Sidebar-menu contains parent and child ul class="Sidebar-menu" >  li  > ul  > li



First UL contain class name Sidebar-menu...

So we have to add and remove active class for the first set  ul li  using class name Sidebar-menu.





<script>
$(document).ready(function(e) {
    $('.sidebar-menu li').on('click', function()
    {
        
         $('.sidebar-menu li.active').removeClass('active');
      
    $(this).first().addClass('active');
    });
});
</script>



Step4:

Treeview-menu contains second  ul  class="Treeview-menu" > li

Second UL contain class name Treeview-menu
 
<script>
 
$(document).ready(function(e) {
    $('.treeview-menu li').on('click', function()
    {
         $('.treeview-menu li.current-active').removeClass('current-active');
      
        $(this).addClass('current-active');
    });
});
</script>

Step5:

one important thing... you should not use both active class  for Two UL..

you have keep one for current-active



 <style>
.current-active
{
    background-color: #00c0ef;
    color:#fff;
}
.current-active li a
{

    color:#fff;
}
.skin-blue .treeview-menu > li > a
{
    color:#fff;
}
</style>



 

Welcome to Designer Dairy

Step1:

When the E-mail icon should be enable and disable as per functionality..

So we  what we did is --- given a class name  called resetpass is an <a> Tag

Step 2:

 when  .fa is  clicked it will check  whether  class fa-envelope is there.... it will remove
 
removeClass('fa-envelope') and add  the new class addClass('fa-envelope-o').

we have two different icons with different name..

Step 3:

 We have implemented in the Script using jquery.

<script>
$(document).ready(function(e) {
 $('.resetpass').on('click', '.fa', function(e)
{
 if ($(this).hasClass('fa-envelope') ) {
  $(this).removeClass('fa-envelope').addClass('fa-envelope-o');
   
   }
else
    {
          $(this).removeClass('fa-envelope-o').addClass('fa-envelope');
    }

 event.stopPropagation();   
});
});

</script>

Step 4:

 HTML Code:

<td><a href="#" class="resetpass"><i class="fa fa-envelope fa-2x"></i> </a> </td>

Enjoy Folks