Struggling to implement a dropdown feature on a vertical navigation using Jquery. The HTML includes a nav section with 1st level list items and nested li's for second level menu items.
On clicking the 1st level li, the intention is to toggle SHOW/HIDE effect for the nested ul/li's of that specific parent li.
HTML:
<aside class="sidebar clearfix">
<nav id="mnCat" class="primary clearfix">
<ul>
<li><a href="#" class="selected" data-filter="*">All</a></li>
<li><a href="#" data-filter=".braids">Braids</a>
<ul>
<li><a href="#">Corn Rows</a></li>
<li><a href="#">Micro Braids</a></li>
<li><a href="#">Single Braids</a></li>
</ul>
</li>
<li><a href="#" data-filter=".twists">Twists</a>
<ul>
<li><a href="#">Curly</a></li>
<li><a href="#">Kinky</a></li>
<li><a href="#">Straight</a></li>
<li><a href="#">Wavy</a></li>
</ul>
<li><a href="#" data-filter=".weaving">Weaving</a>
<ul>
<li><a href="#">Straight</a></li>
<li><a href="#">Wet & Wavy</a></li>
<li><a href="#">Curly</a></li>
<li><a href="#">Deep Wave</a></li>
<li><a href="#">Kinky</a></li>
</ul>
</li>
<li><a href="#" data-filter=".wigs">Wigs</a>
<ul>
<li><a href="#">Half Wigs</a></li>
<li><a href="#">Full Wigs</a></li>
<li><a href="#">Lace Fronts</a></li>
</ul>
</li>
<li><a href="#" data-filter=".silk">Silk Fantasy</a></li>
</ul>
</nav>
</aside>
JQuery:
$(document).ready(function () {
var $dropDown = $('nav#mnCat ul li ul');
$dropDown.addClass("drop");
var $trig = $('nav#mnCat ul');
$trigger = $trig.find('a'),
$trigger.click(function () {
$dropD = $dropDown.find(this),
$dropD.css("display","block");
});
});
jSfiddle link: http://jsfiddle.net/SDYXy/