Java-Scripts.net

Collapsible Sidebar Menu

Organize complex navigation. This accordion-style menu script lets users expand specific sections to see more links, keeping your layout clean and uncluttered.

Copy the Script

<script>
function toggleSub(id) {
    var elem = document.getElementById(id);
    if (elem.style.display === "block") {
        elem.style.display = "none";
    } else {
        elem.style.display = "block";
    }
}
</script>

<button onclick="toggleSub('menu1')">Category 1</button>
<div id="menu1" style="display:none;">
    <a href="#">Link A</a><br>
    <a href="#">Link B</a>
</div>

Frequently Asked Questions

Yes. You can nest `
    ` lists inside other lists as deep as you like. The script targets the specific sub-menu related to the clicked button.

This script toggles `display: block/none` for simplicity. To animate it, you would toggle a CSS class that changes `max-height` and adds a `transition` effect.

Yes, this click-based interaction works perfectly on touch screens, unlike hover-based menus which can be problematic on mobile.