JSFiddle - React, Tailwind, and code Playground
by Ayri Rin
HTML
<a class="most_ranked_link" href="#">Most ranked</a>
<div class="most_ranked_link_menu" style="display: none;">
<ul>
<li><a href="#">Most ranked</a></li>
<li><a href="#">Most ranked-2</a></li>
<li><a href="#">Most ranked-3</a></li>
<li><a href="#">Most ranked-4</a></li>
</ul>
</div>
<a class="today_filter_link" href="#">Today</a>
<div class="today_filter_link_menu" style="display: none;">
<ul>
<li><a href="#">Today</a></li>
<li><a href="#">Last week</a></li>
<li><a href="#">Last month</a></li>
<li><a href="#">Last 6 month</a></li>
<li><a href="#">Last yearh</a></li>
</ul>
</div>
<div class="f_left profile_menu">
<span class="profile_title">Alexander Smith</span>
<img class="account_avatar" src="images/avatar.png" />
<ul class="sub_menu_nav_profile">
<li><a href="#">My Chanell</a></li>
<li><a href="#">My Subscriptions</a></li>
<li><a href="#">My Discussions</a></li>
<li><a href="#">My Settings</a></li>
<li><a class="profile_out" href="#">Sign out</a></li>
</ul>
<div class="clear"></div>
</div>
CSS
.most_ranked_link {
display: block;
width: 200px;
}
.most_ranked_link_menu, .today_filter_link_menu {
position: absolute;
}
.today_filter_link, .today_filter_link_menu {
display: block;
width: 100px;
}
JavaScript
$('.most_ranked_link').click(function () {
if($(".most_ranked_link_menu").is(":visible"))
$('.most_ranked_link_menu').hide();
else
$('.most_ranked_link_menu').show();
});
$('.today_filter_link').click(function () {
if($(".today_filter_link_menu").is(":visible"))
$('.today_filter_link_menu').hide();
else
$('.today_filter_link_menu').show();
});
$('.profile_title').click(function () {
if($(".sub_menu_nav_profile").is(":visible"))
$('.sub_menu_nav_profile').hide();
else
$('.sub_menu_nav_profile').show();
});