jQuery targeting all list elements instead of only one

[bweliky]

I'm having a problem where my drop-down list it's toggling the entire set of li elements. I was just wondering how I could change my Jquery to target the first child ul of the parent in this case "span" element I clicked on.Is there a simple way to fix this problem? I attached a Jfiddle below, also not entirely sure why list has a giant left margin but that seems trivial.http://jsfiddle.net/4yJuc/24/The HTML\[code\]<dl id="sample" class="dropdown"> <dt><a href="http://stackoverflow.com/questions/12768774/#"><span>COUNTRIES</span></a></dt> <dd> <ul> <li><a href="http://stackoverflow.com/questions/12768774/#">Brazil<img class="flag" src="http://stackoverflow.com/questions/12768774/br.png" alt="" /><span class="value">BR</span></a></li> <li><a href="http://stackoverflow.com/questions/12768774/#">France<img class="flag" src="http://stackoverflow.com/questions/12768774/fr.png" alt="" /><span class="value">FR</span></a></li> <li><a href="http://stackoverflow.com/questions/12768774/#">Germany<img class="flag" src="http://stackoverflow.com/questions/12768774/de.png" alt="" /><span class="value">DE</span></a></li> <li><a href="http://stackoverflow.com/questions/12768774/#">India<img class="flag" src="http://stackoverflow.com/questions/12768774/in.png" alt="" /><span class="value">IN</span></a></li> </ul> </dd> <dt><a href="http://stackoverflow.com/questions/12768774/#"><span>PLANETS</span></a></dt> <dd> <ul> <li><a href="http://stackoverflow.com/questions/12768774/#">EARTH<img class="flag" src="http://stackoverflow.com/questions/12768774/br.png" alt="" /><span class="value">BR</span></a></li> <li><a href="http://stackoverflow.com/questions/12768774/#">SATURN<img class="flag" src="http://stackoverflow.com/questions/12768774/fr.png" alt="" /><span class="value">FR</span></a></li> <li><a href="http://stackoverflow.com/questions/12768774/#">MARS<img class="flag" src="http://stackoverflow.com/questions/12768774/de.png" alt="" /><span class="value">MR</span></a></li> <li><a href="http://stackoverflow.com/questions/12768774/#">PLUTO(JK)<img class="flag" src="http://stackoverflow.com/questions/12768774/in.png" alt="" /><span class="value">PL</span></a></li> </ul> </dd></dl><span id="result"></span>?\[/code\]Jquery\[code\] $(document).ready(function() { $(".dropdown img.flag").addClass("flagvisibility"); $(".dropdown dt a").click(function() { $(".dropdown dd ul").toggle(); }); $(".dropdown dd ul li a").click(function() { var text = $(this).html(); $(".dropdown dt a span").html(text); $(".dropdown dd ul").hide(); $("#result").html("Selected value is: " + getSelectedValue("sample")); }); function getSelectedValue(id) { return $("#" + id).find("dt a span.value").html(); } $(document).bind('click', function(e) { var $clicked = $(e.target); if (! $clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide(); }); $("#flagSwitcher").click(function() { $(".dropdown img.flag").toggleClass("flagvisibility"); }); });\[/code\]