Trying to achieve:
Visit this link
In my navigation menu, I have two folders with subpages under them. The CSS for displaying the page titles within the folder is as follows:
.main-nav .subnav ul {display:none;
transition: all 100ms ease-in-out;
}
.main-nav .subnav ul.expand {
display: block;
}
I am using jQuery to toggle the class .expand on click to show the titles:
<script>
$(document).ready(function(){
$(".main-nav li.folder").click(function(){
$
$(".main-nav .subnav ul").toggleClass("expand");
});
});
</script>
I am trying to modify it so that only the clicked folder's elements display instead of showing all folders at once.
Your help is appreciated. Thank you.