Let's see how we can make standard SharePoint left navigation control collapsible.
Simple version: you can hide all the 2nd level ul elements. Then you can show only the ul in the li marked with the .selected class.
#sideNavBox .ms-core-listMenu-verticalBox ul ul {
display: none;
}
#sideNavBox .ms-core-listMenu-verticalBox ul li.selected ul {
display: block;
}The problem. SharePoint only sets the current item as selected. So if you're on a 2nd level page the navigation will be collapsed because the parent of this item will not be marked as selected.
We can use a bit of jQuery magic to fix this.
// closest() will also look at the element that it's being applied to, so we need to exclude it
jQuery("#sideNavBox li.selected").closest("#sideNavBox ul.root li.static:not(.selected)").addClass("selected");You can apply a different class, but you'll need to update the CSS as well.
Let's see this in action:
