title: Showing active menu on a drop down side menu on Bootstrap (AdminLTE)
body: <p>I want to highlight the active page on the side bar menu.
  I am using Bootstrap (AdminLTE).</p>
  
  <p>I have tried a number of javascript ways to no avail. Kindly anyone help out. Below is the side bar menu.</p>
  
  <pre><code>&lt;ul class="sidebar-menu" &gt;
    &lt;li class=""&gt;&lt;a href="/dashboard"&gt;&lt;i class="fa fa-dashboard"&gt;&lt;/i&gt; &lt;span&gt;Dashboard&lt;/span&gt;&lt;/a&gt; &lt;/li&gt;
    &lt;br&gt;
    &lt;li class="treeview"&gt;
      &lt;a href=""&gt; &lt;i class="fa fa-cogs"&gt;&lt;/i&gt; &lt;span&gt; Account Configuarion&lt;/span&gt; &lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt; &lt;/a&gt;
      &lt;ul class="treeview-menu"&gt;
        &lt;li class="treeview"&gt;
          &lt;a href=""&gt; &lt;i class="fa fa-mobile fa-lg"&gt;&lt;/i&gt; &lt;span&gt;M-PESA C2B&lt;/span&gt; &lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt; &lt;/a&gt;
          &lt;ul class="treeview-menu"&gt;
            &lt;li class=""&gt;&lt;a href="/c2b"&gt;&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;C2B Settings&lt;/a&gt;&lt;/li&gt;
            &lt;li class=""&gt;&lt;a href="/online-checkout"&gt;&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt; Online CheckOut&lt;/a&gt;&lt;/li&gt;
            &lt;li class=""&gt;&lt;a href="/stk-push"&gt;&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt; STK Push&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="treeview"&gt;
          &lt;a href=""&gt; &lt;i class="fa fa-mobile fa-lg"&gt;&lt;/i&gt; &lt;span&gt;M-PESA B2C&lt;/span&gt; &lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt; &lt;/a&gt;
          &lt;ul class="treeview-menu"&gt;
            &lt;li&gt;&lt;a href="b2c-documentation"&gt;&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;  B2C Settings&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="treeview"&gt;
          &lt;a href=""&gt; &lt;i class="fa fa-send"&gt;&lt;/i&gt; &lt;span&gt;SMS&lt;/span&gt; &lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt; &lt;/a&gt;
          &lt;ul class="treeview-menu"&gt;
            &lt;li class=""&gt;&lt;a href="/sms-setting"&gt;&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;SMS Settings&lt;/a&gt;&lt;/li&gt;
            &lt;li class=""&gt;&lt;a href="/subscription"&gt;&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;Subscription SMS Settings&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  
    &lt;li class="treeview "&gt;
      &lt;a href="#"&gt; &lt;i class="fa fa-cogs"&gt;&lt;/i&gt; &lt;span&gt;Account Info&lt;/span&gt; &lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt; &lt;/a&gt;
      &lt;ul class="treeview-menu"&gt;
        &lt;li class=""&gt;&lt;a href="buy-units"&gt;&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt; Buy Units&lt;/a&gt;&lt;/li&gt;
        &lt;li class=""&gt;&lt;a href="/account-details"&gt;&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;Account Details&lt;/a&gt;&lt;/li&gt;
        &lt;li class=""&gt;&lt;a href="/users"&gt;&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;Account Users&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I tried with this javascript code but ends up opening all the dropdowns. All the same, it does highlight the current item. But I would want the other items remain closed and only active remains open.</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function() {
          var url = window.location; 
          var element = $('ul.sidebar-menu a').filter(function() {
          return this.href == url || url.href.indexOf(this.href) == 0; }).parent().addClass('active');
          if (element.is('li')) { 
               element.addClass('active').parent().parent('li').addClass('active')
           }
      });
      &lt;/script&gt;
  </code></pre>