I have organized a few categories and their sub-categories on my website using nested <ul> <li> tags. When a user clicks on a category, I want all the related sub-categories to become visible. Initially, none of the sub-categories are visible.
This is how it is structured in the body:
<ul>
<li class="dropdown">Data mining and data warehousing
<ul>
<li>Data mining techniques</li>
<li>Knowledge discovery</li>
</ul>
</li>
<li class="dropdown">Soft computing and artificial intelligence
<ul>
<li>Fuzzy systems</li>
<li>Neural networks</li>
</ul>
</li>
</ul>
This is the CSS styling used:
li.dropdown ul {
display : none;
}
I've included the following JavaScript script in the HTML head section:
<script type="text/javascript">
$('li.dropdown').click(function() {
$(this).children('ul').toggle();
});
</script>
The initial effect works as intended with all sub-categories hidden. However, I would like for when a category is clicked, such as Data mining and data warehousing, then its sub-categories (Data mining techniques and Knowledge discovery) should also become visible.
Additionally, when another category is clicked, the previously opened categories' sub-categories should collapse again. How can I achieve this?