Below is the HTML code I am using :
<ul class="main-block">
<li class="firstLevel">
<a href="#category">EXAMPLE CATEGORY 1</a>
<ul class="dijete">
<li class="child">
<a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 11.</a>
</li>
<li class="child">
<a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 1.1</a>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#category">EXAMPLE CATEGORY 2</a>
<ul class="dijete">
<li class="child">
<a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 2.1</a>
</li>
<li class="child">
<a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 2.2</a>
</li>
</ul>
</li>
</ul>
Here's my jQuery code for toggle():
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(function() {
$j('li.firstLevel').click(function(){
if($j('ul.dijete').hasClass('active')){
$j(this).find('ul.dijete').removeClass('active');
}else{
$j(this).find('ul.dijete').addClass('active');
}
});
});
</script>
However, I am facing an issue where when I have one category (EXAMPLE 1) active and then click on another category (EXAMPLE 2), the first one remains open and the second one does not open up.
Why is the hide-show functionality not working as expected?
How can I show the second sub-menu and hide the first one when clicking on a different category? This behavior is not working in either way.