1

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.

2

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;');
}
  • Thank you for posting this. How do you implement it? as new user of sharepoint. Will it for sharepoint 2010 also? Thanks – user48109 Oct 23 '15 at 7:34
  • @Folio to implement it you need to load that CSS and script in the master page, either by linking to files somewhere or by embedding it directly in the page. Keep in mind that you will need to load jQuery before you load the Javascript posted here. I do not know if it will work as is in 2010, but it will probably be easy to modify if not. Just explore a SP2010 page and see how the Quicklaunch is constructed and what elements you can hook into. – Dylan Cristy Oct 23 '15 at 20:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.