SP 2013 Quick Launch bar collapse/expand

Question

I want to collapse/expand each sub-link under its corresponding main link on the Quick Launch bar without having to write code. Is this possible?

Main link should always display, but sub links should be able to collapse or expand like a tree.

Answer 1

I don't think that this is possible "without having to write code".

It is possible with a small amount of Javascript and CSS, though, and no C# code. This solution assumes that you only have two levels to the link hierarchy, the main links and one level of sub links. It also allows for the headers (main links) to be actual links to content, or not, and only expands/contracts the sub links when you click on the expand/contract caret itself. Clicking on any other section of the main header link will behave normally, taking you to that content.

The CSS you will need:

#sideNavBox .root li {
    position: relative;
}

a.accordionControl {
    text-decoration: none;
    position: absolute;
    right: 5px;
    bottom: 5px;  /* change to "top: 5px;" to have the caret stay on the main link */
    z-index: 1;
}

a.accordionControl:hover,
a.accordionControl:active,
a.accordionControl:focus,
a.accordionControl:visited {
    text-decoration: none;
}

The Javascript you will need (requires jQuery):

$(document).ready(function () {
    SetAccordionQuicklaunch();
});

function SetAccordionQuicklaunch() {

    var caretMarkup = "<a href='#' class='accordionControl contracted'>&or;</a>";

    // initialize
    $('#sideNavBox .root.static > li.static').each(function () {
        if ($(this).find('ul').length) {
            $(this).children('a').after(caretMarkup);
            $(this).children('span').after(caretMarkup); // also finds headers that are not links themselves
            $(this).removeClass('selected').children('ul').hide();
        }
    });

    $('.accordionControl').click(function () {
        if ($(this).hasClass('contracted')) {
            $('.accordionControl.expanded').each(function () {  // these three lines will make any expanded sections automatically contract when you expand a new section
                ContractQuickLaunchSection($(this));            // if you want to be able to have multiple sections expanded at the same time,
            });                                                 // remove these three lines of code.
            ExpandQuickLaunchSection($(this));
        } else if ($(this).hasClass('expanded')) {
            ContractQuickLaunchSection($(this));
        }
        return false;
    });
}

function ContractQuickLaunchSection(accordionControlLink) {
    accordionControlLink.siblings('ul').slideUp();
    accordionControlLink.removeClass('expanded').addClass('contracted');
    accordionControlLink.html('&or;');
}

function ExpandQuickLaunchSection(accordionControlLink) {
    accordionControlLink.siblings('ul').slideDown();
    accordionControlLink.removeClass('contracted').addClass('expanded');
    accordionControlLink.html('&and;');
}