title: Use jQuery to add an Active class to active tab elements depending on loaded Page
body: <p><strong>MY QUESTIONS</strong> are: </p>
  
  <ul>
  <li><p>How can I add a class to an element unsing jQuery, or anything else for that matter, to the active tab?</p></li>
  <li><p>Have is so that the tab that dropdown is the one that contains the active tab &amp; not always the Company one.</p></li>
  </ul>
  
  <p>In sort I need to be able to have to active tab popup from the other tab and have it so the tab that drops down is the one that contains the active tab.</p>
  
  <p>This is what it looks like:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  
  // Makes all other dropdowns vanish
    function slideAllUp(obj)
    {
       $(".hideothers").each(function(){
         
         if ($(this)[0] != obj[0])
         {
           $(this).hide(); //perform on all except self.
         }
       })
    }
  
  // Sets active tab (adds class to active tab)
    $('.sidebar-menu li').on('click', function () {
  
        $(this).siblings().removeClass('clicked');
        $(this).addClass('clicked');
  
  
    });
    
  
  $(".hideothers").hide();
  
  // Account dropdown
      $(".slidingDiv_account").hide();
      $(".show_hide_account").show();
      
      $(".show_hide_account").click(function(){
      slideAllUp($(".slidingDiv_account"));
      $(".slidingDiv_account").slideDown();
      });
  
  // Company dropdown
      $(".slidingDiv_company").show();
      $(".show_hide_company").show();
      // $(".hideothers").hide();
      
      $(".show_hide_company").click(function(){
      slideAllUp($(".slidingDiv_company"));
      $(".slidingDiv_company").slideDown();
      });
  
  // Invest dropdown
      $(".slidingDiv_invest").hide();
      $(".show_hide_invest").show();
      // $(".hideothers").hide();
      
      $(".show_hide_invest").click(function(){
      slideAllUp($(".slidingDiv_invest"));
      $(".slidingDiv_invest").slideDown();
      });
  
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul.sidebar-menu , ul.sidebar-menu li ul.sub{
      margin: -2px 0 0;
      padding: 0;
  }
  
  ul.sidebar-menu {
      margin-top: 75px;
  }
  
  ul.sidebar-menu li a span{
      display: inline-block;
  }
  
  ul.sidebar-menu li a{
      color: #aeb2b7;
      text-decoration: none;
      display: block;
      padding: 15px 0 15px 10px;
      font-size: 12px;
      outline: none;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      transition: all 0.3s ease;
  }
  
  ul.sidebar-menu li a.active, ul.sidebar-menu li a:hover, ul.sidebar-menu li a:focus {
      background: #68dff0;
      color: #fff;
      display: block;
  
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      transition: all 0.3s ease;
  }
  
  
  ul.sidebar-menu li a i {
      font-size: 15px;
      padding-right: 6px;
  }
  
  ul.sidebar-menu li a:hover i, ul.sidebar-menu li a:focus i {
      color: #fff;
  }
  
  ul.sidebar-menu li a.active i {
      color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!--sidebar start--&gt;
        &lt;aside&gt;
        &lt;!-- Start of Toggle --&gt;
          &lt;div id="sidebar"  class="nav-collapse "&gt;
            &lt;!-- sidebar menu start--&gt;
            &lt;ul class="sidebar-menu" id="nav-accordion"&gt;
  
            &lt;div class="top_menu"&gt;
              &lt;span class="show_hide_company"&gt;Company&lt;i class="fa fa-briefcase"&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;span class="show_hide_invest"&gt;Invest&lt;i class="fa fa-line-chart"&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;span class="show_hide_account"&gt;Account&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;/div&gt;&lt;br&gt;
  
  
            &lt;!-- Account Dropdown --&gt; 
              &lt;div class="slidingDiv_account hideothers"&gt; &lt;!-- Start of toggle --&gt;
                &lt;li&gt;
                  &lt;a href="/inbox"&gt;
                    &lt;i class="fa fa-inbox"&gt;&lt;/i&gt;
                    &lt;span&gt;Inbox&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a href="/users-companies"&gt;
                    &lt;i class="fa fa-search"&gt;&lt;/i&gt;
                    &lt;span&gt;Users &amp; Companies&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a href="/account"&gt;
                    &lt;i class="fa fa-pencil"&gt;&lt;/i&gt;
                    &lt;span&gt;Edit Account&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a href="/request-help"&gt;
                    &lt;i class="fa fa-question"&gt;&lt;/i&gt;
                    &lt;span&gt;Request &amp; Help&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
              &lt;/div&gt; &lt;!-- end of toggle --&gt;
  
  
            &lt;!-- Company Dropdown --&gt;
              &lt;div class="sub slidingDiv_company hideothers" style="display: block;"&gt; &lt;!-- Start of toggle --&gt;
                
                &lt;%if Company.where(:user_id =&gt; current_user.id).count==0 || current_user.premium%&gt;
                &lt;li&gt;
                  &lt;a href="/companies/new"&gt;
                    &lt;i class="fa fa-star"&gt;&lt;/i&gt;
                    &lt;span&gt;Start a Startup&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;%end%&gt;
  
                &lt;%if Company.where(:user_id =&gt; current_user.id).count&gt;=1%&gt;
                &lt;li&gt;
                  &lt;a href="/companies"&gt;
                    &lt;i class="fa fa-building"&gt;&lt;/i&gt;
                    &lt;%if Company.where(:user_id =&gt; current_user.id).count==1%&gt;
                      &lt;span&gt;Company&lt;/span&gt;
                    &lt;%elsif Company.where(:user_id =&gt; current_user.id).count&gt;1%&gt;
                      &lt;span&gt;Companies&lt;/span&gt;
                    &lt;%end%&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;%end%&gt;
                
                &lt;li&gt;
                  &lt;a href="/trade"&gt;
                    &lt;i class="fa fa-exchange"&gt;&lt;/i&gt;
                    &lt;span&gt;Trade&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
  
                &lt;li&gt;
                  &lt;a href="/profit-and-loss"&gt;
                    &lt;i class="fa fa-list"&gt;&lt;/i&gt;
                    &lt;span&gt;Profit &amp; Loss&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
  
                &lt;li&gt;
                  &lt;a href="/upgrade"&gt;
                    &lt;i class="fa fa-arrow-up"&gt;&lt;/i&gt;
                    &lt;span&gt;Upgrade&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
  
                &lt;li&gt;
                  &lt;a href="/employes/find"&gt;
                    &lt;i class="fa fa-search"&gt;&lt;/i&gt;
                    &lt;span&gt;Find Employes&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
                
  
              &lt;/div&gt; &lt;!-- end of toggle --&gt;
            
  
            &lt;!-- Invest Dropdown --&gt;
              &lt;div class="sub slidingDiv_invest hideothers" style="display: block;"&gt; &lt;!-- Start of toggle --&gt;
                &lt;li&gt;
                  &lt;a href="/stock-market"&gt;
                    &lt;i class="fa fa-line-chart"&gt;&lt;/i&gt;
                    &lt;span&gt;Stock Market&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
  
                &lt;li&gt;
                  &lt;a href="/find-investors"&gt;
                    &lt;i class="fa fa-search"&gt;&lt;/i&gt;
                    &lt;span&gt;Find Investors&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
  
                &lt;li&gt;
                  &lt;a href="/investments"&gt;
                    &lt;i class="fa fa-list"&gt;&lt;/i&gt;
                    &lt;span&gt;Invest&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
  
                &lt;li&gt;
                  &lt;a href="/properties"&gt;
                    &lt;i class="fa fa-bank"&gt;&lt;/i&gt;
                    &lt;span&gt;Properties&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
  
                &lt;li&gt;
                  &lt;a href="/advertisement"&gt;
                    &lt;i class="fa fa-tv"&gt;&lt;/i&gt;
                    &lt;span&gt;Advertisment&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
  
              &lt;/div&gt; &lt;!-- end of toggle --&gt;
            
  
              &lt;li class="mt"&gt;
                &lt;!--                       &lt;a href="index.html"&gt; --&gt;
                &lt;!--                           &lt;i class="fa fa-search"&gt;&lt;/i&gt; --&gt;
                &lt;!--                           &lt;span&gt;Browse Events&lt;/span&gt; --&gt;
              &lt;/a&gt;
            &lt;/li&gt;
  
          &lt;/ul&gt;
          &lt;!-- sidebar menu end--&gt;
        &lt;/div&gt;
      &lt;/aside&gt;
      &lt;!--sidebar end --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Click on Company, Account and Invest to see the "dropdowns".</p>
  
  <p>Note: When you click on a tab it loads a new page.</p>