SharePoint 2013 Branding: Collapsible Left Navigation

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:

"News" doesn't have children and is selected. "Organization" has children but it's collapsed

Top level of "Organization" is selected.

A child of "Organization" is selected