JSFiddle - React, Tailwind, and code Playground

by ismusidhu

HTML

<ul id="topNavMenu" class="inner">
  <li class="show_tablet" id="nav_setting">
    <a title="Setting" href="/settings.asp">Overview</a>
  </li>
</ul>
<br/><br/><br/><br/><br/><br/>


<nav id="divNavigationMenu">
  <ul class="inner">
    <li class="show_tablet" id="nav_dashboard">
      <a title="Overview" href="/overview.asp"><span class="icon"><!-- Dashboard Icon --></span> Overview</a>
    </li>
    <li class="show_mobile show_tablet" id="nav_customers">
      <a title="Customers" href="/customers.asp"><span class="icon"><!-- Customers Icon --></span> Customers</a>
    </li>
    <li class="active show_tablet" id="nav_quotes">
      <a title="Quotes" href="/estimates.asp"><span class="icon"><!-- Quotes Icon --></span> Quotes</a>
    </li>
    <li class="show_mobile show_tablet" id="nav_sales">
      <a title="Sales" href="#/invoices"><span class="icon"><!-- Sales Icon --></span> Sales</a>
    </li>
    <li class="show_mobile show_tablet" id="nav_suppliers">
      <a title="Suppliers" href="/suppliers.asp"><span class="icon"><!-- Suppliers Icon --></span> Suppliers</a>
    </li>
    <li class="show_mobile show_tablet" id="nav_purchases">
      <a title="Purchases" href="/receipts.asp"><span class="icon"><!-- Purchases Icon --></span> Purchases</a>
    </li>
    <li class="show_tablet" id="nav_bank">
      <a title="Bank" href="/bankaccounts.asp"><span class="icon"><!-- Bank Icon --></span> Bank</a>
    </li>
    <li id="nav_reports">
      <a title="Reports" href="/reports.asp"><span class="icon"><!-- Reports Icon --></span> Reports</a>
    </li>
    <li class="show_tablet" id="nav_projects">
      <a title="Projects" href="/projects.asp"><span class="icon"><!-- Projects Icon --></span> Projects</a>
    </li>
    <li class="show_mobile show_tablet" id="nav_more">
      <a href="#"><span class="icon"><!-- More Icon --></span> More</a>
    </li>
    <li class="show_tablet" id="nav_logout">
      <a href="#"><span class="icon"><!-- Logout Icon --></span> Logout</a>
...

CSS

.active { 
    background: none repeat scroll 0 0 Green;
    border-radius: 5px 5px 0 0;
}

JavaScript

var selector = "#divNavigationMenu > ul > li, #topNavMenu > li"
$("#remove").click(function(){
    $(selector).removeClass("active");    
});

$("#add").click(function(){    
    $(selector).addClass("active");
});


$("#addRemove").click(function(){    
    $(selector).removeClass("active").filter("[id='nav_logout'], [id='nav_setting']").addClass("active");
    
});