How can I create a dynamic menu with multiple categories and submenus that toggle open and close when clicked? I currently have a menu structure with "What's New" and "Categories", and within the "Categories" section, I have three main categories each with their own submenu. My goal is to make it so that only one category or submenu is open at a time, meaning if a new category is clicked, the previous one automatically closes. I tried using radio buttons instead of checkboxes but encountered issues. Does anyone have a solution or suggestion for achieving this functionality? Any help would be appreciated. You can find the current structure and code in this Fiddle.
<div class='shop-sidebar'>
<ul class='shop-nav'>
<li class="active"><a href="#">What's New</a></li>
<li class='w-sub' data-id='shop-categories'>
<svg class='s_arrow_down'><use xlink:href="#s_arrow_down"></use></svg>
<input type="checkbox" id="categories" />
<label id="label" for="categories">Categories</label>
<ul id="subList">
<li>
<input type="checkbox" id="all" />
<label id="allLabel" for="all">All</label>
</li>
<li>
<input type="checkbox" id="category1" />
<label id="category1Label" for="category1">Category 1</label>
<ul id="subListCategory1">
<li><a href="#">All</a></li>
<li><a href="#">Sub Category 1</a></li>
...
</ul>
</li>
<li>
<input type="checkbox" id="category2" />
<label id="category2Label" for="category2">Category 2</label>
<ul id="subListCategory2">
<li><a href="#">All</a></li>
...
</ul>
</li>
<li>
<input type="checkbox" id="category3" />
<label id="category3Label" for="category3">Category 3</label>
<ul id="subListCategory3">
<li><a href="#">All</a></li>
...
</ul>
</li>
</ul>
</li>
</ul>
</div></code></pre></div></div></p>
<p>css</p>
<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>.shop-sidebar {
width: 30%;
width: calc(295px);
...
}