I am encountering an issue with my list and submenus. When I click on List 1, submenu 1 opens but if I then click on List 2, submenu 2 opens while submenu 1 remains open. However, when I click on List 2 again, instead of just closing submenu 2, it toggles open and closed repeatedly.
Any assistance with this matter would be greatly appreciated.
Here is the jsfiddle link for reference
$(document).ready(function () {
$('li a').on('click', function(){
$('.square').slideUp();
$(this).siblings().slideToggle();
});
}); li {padding:20px; border: solid 1px;margin:5px;}
.square {
display: none;
border: 1px solid red;
}
.active {
display: block;
border: 1px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a class="test">Hover List1</a>
<div class="square">
Square 1
</div>
</li>
<li>
<a>Hover List2</a>
<div class="square">
Square 2
</div>
</li>
<li>
<a>Hover List3</a>
<div class="square">
Square 3
</div>
</li>
<li>
<a>Hover List4</a>
<div class="square">
Square 4
</div>
</li>
</ul>