INQUIRIES I have include:
How do I apply a class to an element using jQuery, or any other method, for the active tab?
Ensure that the dropdown tab appearing is the one containing the active tab, not always the Company one.
In essence, I want the active tab to slide down from another tab and ensure that the dropdown tab corresponds with the active tab.
This is the current setup:
$(document).ready(function(){
// Hides all other dropdowns
function slideAllUp(obj)
{
$(".hideothers").each(function(){
if ($(this)[0] != obj[0])
{
$(this).hide(); //perform on all except self.
}
})
}
// Assigns 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();
});
});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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--sidebar start-->
<aside>
<!-- Start of Toggle -->
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<div class="top_menu">
<span class="show_hide_company">Company<i class="fa fa-briefcase"></i></span>
<span class="show_hide_invest">Invest<i class="fa fa-line-chart"></i></span>
<span class="show_hide_account">Account<i class="fa fa-user"></i></span>
</div><br>
<!-- Account Dropdown -->
<div class="slidingDiv_account hideothers"> <!-- Start of toggle -->
<li>
<a href="/inbox">
<i class="fa fa-inbox"></i>
<span>Inbox</span>
</a>
</li>
<li>
<a href="/users-companies">
<i class="fa fa-search"></i>
<span>Users & Companies</span>
</a>
</li>
<li>
<a href="/account">
<i class="fa fa-pencil"></i>
<span>Edit Account</span>
</a>
</li>
<li>
<a href="/request-help">
<i class="fa fa-question"></i>
<span>Request & Help</span>
</a>
</li>
</div> <!-- end of toggle -->
<!-- Company Dropdown -->
<div class="sub slidingDiv_company hideothers" style="display: block;"> <!-- Start of toggle -->
<%if Company.where(:user_id => current_user.id).count==0 || current_user.premium%>
<li>
<a href="/companies/new">
<i class="fa fa-star"></i>
<span>Start a Startup</span>
</a>
</li>
<%end%>
<%if Company.where(:user_id => current_user.id).count>=1%>
<li>
<a href="/companies">
<i class="fa fa-building"></i>
<%if Company.where(:user_id => current_user.id).count==1%>
<span>Company</span>
<%elsif Company.where(:user_id => current_user.id).count>1%>
<span>Companies</span>
<%end%>
</a>
</li>
<%end%>
<li>
<a href="/trade">
<i class="fa fa-exchange"></i>
<span>Trade</span>
</a>
</li>
<li>
<a href="/profit-and-loss">
<i class="fa fa-list"></i>
<span>Profit & Loss</span>
</a>
</li>
<li>
<a href="/upgrade">
<i class="fa fa-arrow-up"></i>
<span>Upgrade</span>
</a>
</li>
<li>
<a href="/employes/find">
<i class="fa fa-search"></i>
<span>Find Employes</span>
</a>
</li>
</div> <!-- end of toggle -->
<!-- Invest Dropdown -->
<div class="sub slidingDiv_invest hideothers" style="display: block;"> <!-- Start of toggle -->
<li>
<a href="/stock-market">
<i class="fa fa-line-chart"></i>
<span>Stock Market</span>
</a>
</li>
<li>
<a href="/find-investors">
<i class="fa fa-search"></i>
<span>Find Investors</span>
</a>
</li>
<li>
<a href="/investments">
<i class="fa fa-list"></i>
<span>Invest</span>
</a>
</li>
<li>
<a href="/properties">
<i class="fa fa-bank"></i>
<span>Properties</span>
</a>
</li>
<li>
<a href="/advertisement">
<i class="fa fa-tv"></i>
<span>Advertisment</span>
</a>
</li>
</div> <!-- end of toggle -->
<li class="mt">
<!-- <a href="index.html"> -->
<!-- <i class="fa fa-search"></i> -->
<!-- <span>Browse Events</span> -->
</a>
</li>
</ul>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end -->Clicking on Company, Account, and Invest will reveal the "dropdowns".
Note: Each tab click initiates a new page load.