title: Tabs icon toggle when active and inactive
body: <p>I have 5 tabs, When one tab is active white icon should appear and when it's inactive red icon should appear.</p>
  
  <p>Please refer code below:</p>
  
  <pre><code>&lt;nav&gt;
     &lt;ul&gt;
        &lt;li class="nav-item"&gt;
           &lt;a class="nav-link" data-toggle="tab" href="#" onclick="switchTab(event, 'openTrips')"  id="defaultOpen" &gt;
              &lt;span &gt;
              &lt;img src="../resources/images/otp-not-received -inactive.svg" class="inactive" /&gt;
              &lt;img src="../resources/images/otp-not-received.svg"   class="activeicon" /&gt;
              &lt;/span&gt;
              &lt;p&gt;
                 OTP Not Received (&lt;span id="notReceivecount"&gt;&lt;/span&gt;)
              &lt;/p&gt;
           &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
           &lt;a class="nav-link" data-toggle="tab" href="#" onclick="switchTab(event, 'inProgressTrips')"&gt;
              &lt;span &gt;
              &lt;img src="../resources/images/otp-received-inactive.svg" class="inactive"/&gt;
              &lt;img src="../resources/images/otp-received.svg" class="activeicon" /&gt;
              &lt;/span&gt;
              &lt;p&gt; OTP Received In Progress (&lt;span id="receivecount"&gt;&lt;/span&gt;)&lt;/p&gt;
           &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
           &lt;a class="nav-link" data-toggle="tab" href="#" onclick="switchTab(event, 'generateInvoice')"&gt;
              &lt;span&gt;
              &lt;img src="../resources/images/ready-to-invoice-inactive.svg" class="inactive" /&gt;
              &lt;img src="../resources/images/ready-to-invoice.svg" class="activeicon"/&gt;
              &lt;/span&gt;
              &lt;p&gt;Ready for Invoice (&lt;span id="readyForInvoiceCount"&gt;&lt;/span&gt;)&lt;/p&gt;
           &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
           &lt;a class="nav-link" data-toggle="tab" href="#" onclick="switchTab(event, 'invoiceData')"&gt;
              &lt;span&gt;
              &lt;img src="../resources/images/invoiced -inactive.svg" class="inactive" /&gt;
              &lt;img src="../resources/images/invoiced.svg"  class="activeicon" /&gt;
              &lt;/span&gt;
              &lt;p&gt;Invoiced (&lt;span id="invoiceCount"&gt;&lt;/span&gt;)&lt;/p&gt;
           &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
           &lt;a class="nav-link" data-toggle="tab" href="#" onclick="switchTab(event, 'invoiceProcessedData')"&gt;
              &lt;span &gt;
              &lt;img src="../resources/images/paid-inactive.svg" class="inactive"/&gt;
              &lt;img src="../resources/images/paid.svg"  class="activeicon"/&gt;
              &lt;/span&gt;
              &lt;p&gt;Paid/Settlement (&lt;span id="paidCount"&gt;&lt;/span&gt;)&lt;/p&gt;
           &lt;/a&gt;
        &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>JS code in ready function</p>
  
  <pre><code> if($(".tabs-style-fillup nav ul li a").hasClass('active')){
             $(".tabs-style-fillup nav ul li a.active img.inactive").hide();
             $(".tabs-style-fillup nav ul li a.active img.activeicon").show();
           }else{
              $(".tabs-style-fillup nav ul li a img.inactive").show();
             $(".tabs-style-fillup nav ul li a img.activeicon").hide();
           }
  </code></pre>
  
  <p>I want to show inactive icon when a tag don't have active class, now for active tabs it's working but for inactive tabs icon is not displaying.It's checking condition for all tabs so, initially it's getting active class and it hides all the inactive icons for all tabs.</p>