Looking to optimize my vertical accordion menu by adding interactive features.
Successfully implemented functionality and CSS styling for the menu.
An issue arises on page load with one category being automatically open, even if I remove the "open" class.
A demonstration can be seen here: jsfiddle (category 2 is my problem!)
Not well-versed in jQuery, unsure if all categories can default to "closed" until clicked.
<script>
$(document).ready(function(){
$("ul.accordion span.name").click(function()
{
var $li = $( this ).parent("li").has("ul");
if( $li.hasClass("open") )
{
$li.find("ul").slideUp('slow', function( ){
$li.removeClass("open");
});
}
else
{
$li.addClass("open");
$li.find("ul").slideDown('slow');
}
});
});
</script>
Is there a way to modify the jQuery script to allow for multiple drop-down categories without increasing space?