How can I toggle the subnav for each item, and if one is open, hide the open one to
show the current one? If there are none shown, just toggle. If you click one and
show subnav then and click another hide previous and
show current.
Here is my html -
<header>
<div class="content-wrapper">
<div class="user-menu-wrapper">
<div class="hsn-logo"></div>
<div class="user-greeting-wrapper">
<div class="user-greeting">Hi, Abraham</div>
</div>
<div class="user-menu">
<ul class="user-menu-items">
<li>@Html.ActionLink(" ", "Index", "Home", new { @class = "my-account" })</li>
<li>@Html.ActionLink(" ", "Index", "Home", new { @class = "my-favorites" })</li>
<li>@Html.ActionLink(" ", "Index", "Home", new { @class = "my-bag" })</li>
</ul>
</div>
</div>
<div class="hsn-nav-wrapper">
<div class="hsn-nav">
<ul class="hsn-nav-items">
<li style="width: 25%">
<a class="shop" href="#">
<span class="hsn-nav-item-wrap">
<span>SHOP</span><span class="drop-down-arrow"></span>
</span>
</a>
</li>
<li style="width: 25%">
<a class="watch" href="#">
<span class="hsn-nav-item-wrap">
<span>WATCH</span><span class="drop-down-arrow"></span>
</span>
</a>
</li>
<li style="width: 25%">
<a class="play" href="#">
<span class="hsn-nav-item-wrap">
<span>PLAY</span><span class="drop-down-arrow"></span>
</span>
</a>
</li>
<li style="width: 15%">
<a href=""><span class="hsn-search-icon"></span>
</a>
</li>
</ul>
</div>
<br class="clear" />
</div>
</div>
</header>
<subnav id="shop" class="shop-subnav">
<div class="hsn-subnav-wrapper">
<div class="hsn-subnav">
<div class="hsn-subnav-left">
<ul>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li><span class="hsn-subnav-callout">Deals</span></li>
</ul>
</div>
<div class="hsn-subnav-right">
<ul>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li><span class="hsn-subnav-callout">Clearance</span></li>
</ul>
</div>
</div>
</div>
</subnav>
<subnav id="watch" class="watch-subnav">
<div class="hsn-subnav-wrapper">
<div class="hsn-subnav">
<div class="hsn-subnav-left">
<ul>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
</ul>
</div>
<div class="hsn-subnav-right">
<ul>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
</ul>
</div>
</div>
</div>
</subnav>
Here is my Jquery / JS -
$(document).ready(function () {
$('ul.hsn-nav-items li a').click(function () {
var navitem = $(this).attr('id')
, id = $(this).attr('class')
, subnav = $('subnav.' + id + '-subnav');
$('a.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
$('#'+id).toggle();
});
});
