My knowledge of JQuery is limited, so here's the issue I'm facing. Below is an example of the HTML structure:
<ul class="first-class">
<li class="second-class">
<a href="#_">
<i class="fa fa-plus"></i>
</a>
<ul class="subdirectory-class">
<li class="second-class">
<a href="#_">
<i class="fa fa-plus"></i>
</a>
<ul class="subdirectory-class">
<li class="second-class">
<a href="#_">
<i class="fa fa-plus"></i>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="second-class">
<a href="#_">
<i class="fa fa-plus"></i>
</a>
<ul class="subdirectory-class">
<li class="second-class">
<a href="#_">
<i class="fa fa-plus"></i>
</a>
</li>
</ul>
</li>
</ul>
What I want to achieve is toggling a specific subdirectory when clicking on the corresponding + sign icon. Currently, my JQuery code toggles all subdirectories at once. How can I modify the code to accomplish this?
The desired behavior is for only the next subdirectory to open/close when clicking on the respective + sign or subdirectory link. This sequence should continue as you progress through different levels of subdirectories.
JQUERY - My current implementation:
$(document).ready(function(){
$(".first-class .second-class").click(function(e){
$(".subdirectory-class", this).first().slideToggle("fast");
$(this).children("a").toggleClass("closed open");
e.preventDefault();
});
});
The current code hides all ul elements except for the main one (initially set with display:none), toggling all subdirectories when clicking. Any assistance on improving this functionality would be greatly appreciated.
Thank you in advance