When I click on the first item in the ul list, it should slideToggle() to show its corresponding items. Similarly, when I click on the second item in the ul list, its items should slideToggle(), but the first ul list remains visible as well. What I am trying to achieve is that when I click on the first ul list, the items in the second ul list should automatically disappear and vice versa - clicking on the second ul list should hide the items in the first ul list. Here's the code snippet:
$("document").ready(function(){
$("#block1").click(function(){
$("#none1, #none2, #none3").slideToggle();
} );
$("#block2").click(function(){
$("#none4, #none5, #none6").slideToggle();
} );
});#none1, #none2, #none3, #none4, #none5, #none6{
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<ul id="first">
<li id="block1"><a href="#">Block1</a></li>
<li id="none1">None1</li>
<li id="none2">None1</li>
<li id="none3">None1</li>
</ul>
<ul id="second">
<li id="block2"><a href="#">Block2</a></li>
<li id="none4">None2</li>
<li id="none5">None2</li>
<li id="none6">None2</li>
</ul>