For a recent project, we are using the native SharePoint Navigation to control the items in the left vertical menu on all of our pages. Most elements in the navigation have one level that link directly to the content. However, some elements are headings with no link to any content but contain sublevels with links to content related to the heading. SharePoint displays all of these element, headings and links, in the navigation and there is no built-in feature to collapse the items under a menu heading.
I found an example for hiding the SharePoint Quick Launch Headings for Libraries, Lists, etc.
{
$("div.menu-vertical>ul.root>li.static>a").toggle(
function () {
$(">ul", $(this).parent()).show("fast");
},
function () {
$(">ul", $(this).parent()).hide("fast");
}
);
$("div.menu-vertical>ul.root>li.static>ul.static").css("display","none");}
This code works great with the Libraries and Lists headers in the Left Navigation since they contain an ‘a’ tag with a url that navigates to a page displaying the lists for that type (line 3 div.menu-vertical>ul.root>li.static>a). I need the expand/collapse to work on a heading element that does not have an associated hyperlink. I also need the heading elements to be collapsed by default and opened when the user clicks the heading element. I think this is a good start and can modify it to meet the rest of my requirements.
Here is the code after the changes.
$("div.menu-vertical>ul.root>li.static>ul.static").css("display", "none");
$("div.menu-vertical>ul.root>li.static>span.static").toggle
(
function () {
$(">ul", $(this).parent()).show("fast");
},
function () {
$(">ul", $(this).parent()).hide("fast");
}
);
$("div.menu-vertical>ul.root>li.static>ul").css("display", "none");
};
The first line in the function closes the heading elements. In the html, the heading element contains a child ‘ul’ element which contains list of subitems in an unordered list. All of the heading elements have this structure, so anywhere this structure exists in the html the function will change the display property. Unexpected effects of this script are limited by including the ‘div.menu-vertical’ element in defining the structure. By default, this appears only once on the page.
The second change was to change the ‘a’ tag reference to the ‘span’ tag for the toggle event. The heading element in our solution does not have a url defined so no a tag is present. The text of the heading is in a span element, so now it is found by the code.
As mentioned in the original post, this function needs to be called before it will provide the toggle effect. I do this by including a script block at the end of the page which calls the makeHeaderCollapse function.
Now each time the Heading element is clicked, the menu items under this heading expand or collapse.
I am pretty impressed with what jQuery offers the web developer. I have played a little with the draggable methods with some quick successes, but I think that will have to wait for a future post.
