Sometimes when we have too many links to be displayed in the left navigation (Quick Launch) menu then we need to implement Accodion Control to expand and shrink the links.
I came to same scenario while I was implementing one such solution for my intranet portal.
In order to implement we need to have below steps to follow :
Step 1 : Go to Site Settings > Look and Feel > Navigation
Step 2: Create Folder Say
I.T Requests under Current Navigation and within this folder create multiple links such as Help Desk Request, I.T Security Guidelines, I.T Audit Policy i-e which will be shrink and expanded inside I.T Request folder.
Step 3: You can create multiple such folders and links inside Current Navigation.
Step 4: Now, we need to implement our solution.
Step 5: Now, open your master page's html file and copy below css under <head> tag
<!-- start here accordian panel -->
<script type="text/javascript">
var SP2013QLAccordion = {
// Options
useAnimation: true, // Animation is supported in IE9+
collapseOtherLevels: false, // Collapse sibling levels on expanding
expandTransition: 'height 0.15s ease-out',
collapseTransition: 'height 0.15s ease-out',
// Initialization function
init: function (){
var levels = document.querySelectorAll('.ms-core-listMenu-verticalBox li');
if (levels.length) {
for (var i = 0; i < levels.length; i++) {
if (levels[i].querySelector('ul')) {
// Create switch elements and append them to levels with sublevels
var switchSpan = document.createElement('div');
switchSpan.className = 'switch';
switchSpan.innerHTML = '<span><img alt="" src="/_layouts/15/images/spcommon.png"/></span>';
levels[i].insertBefore(switchSpan, levels[i].firstChild);
// Add 'expanded' class to selected branch and 'collapsed' to all other
levels[i].className += (levels[i].querySelector('.selected') || levels[i].className.indexOf('selected') != -1) ? ' expanded' : ' collapsed';
}
}
// Detect IE8 or lower to turn off animation
if (document.all && !document.addEventListener) SP2013QLAccordion.useAnimation = false;
var switches = document.querySelectorAll('.ms-core-listMenu-verticalBox .switch');
// Add collapse/expand event to switch nodes
if (switches.length) {
for (var j = 0; j < switches.length; j++) {
AddEvent(switches[j], 'click', ExpandCollapse);
}
}
}
// Function to get height of a hidden node
function CalculateHeight (node) {
var initialStyles = node.style.cssText,
nodeHeight;
node.style.position = 'absolute';
node.style.visibility = 'hidden';
node.style.height = 'auto';
nodeHeight = node.offsetHeight;
node.style.cssText = initialStyles;
return nodeHeight;
}
// Expand/Collapse function
function ExpandCollapse (param) {
var level = this.parentNode,
sublevel = level.querySelector('ul'),
sublevelHeight = CalculateHeight(sublevel),
otherLevels = level.parentElement.children;
// Close other levels on expanding
if (SP2013QLAccordion.collapseOtherLevels && level.className.indexOf('collapsed') != -1 && !param) {
for (var i = 0; i < otherLevels.length; i++) {
if (otherLevels[i].className.indexOf('expanded') != -1) ExpandCollapse.call(otherLevels[i], 'collapse');
}
}
if (SP2013QLAccordion.useAnimation) {
// Animated collapse
if (level.className.indexOf('expanded') != -1 || param == 'collapse') {
sublevel.style.height = sublevelHeight + 'px';
level.className = level.className.replace(' expanded',' collapsed');
sublevel.style.transition = SP2013QLAccordion.collapseTransition;
sublevel.offsetHeight; // Force repaint
sublevel.style.height = 0;
// Animated expand
} else {
sublevel.style.height = 0;
level.className = level.className.replace(' collapsed',' expanded');
sublevel.style.transition = SP2013QLAccordion.expandTransition;
sublevel.offsetHeight; // Force repaint
sublevel.style.height = sublevelHeight + 'px';
sublevel.addEventListener('transitionend', function transitionEnd(event) {
if (event.propertyName == 'height') {
sublevel.removeAttribute('style');
sublevel.removeEventListener('transitionend', transitionEnd, false);
}
}, false);
}
} else {
// Not animated collapse
if (level.className.indexOf('expanded') != -1 || param == 'collapse') {
level.className = level.className.replace(' expanded',' collapsed');
// Not animated expand
} else {
level.className = level.className.replace(' collapsed',' expanded');
}
}
}
// Crossbrowser event attachment helper function
function AddEvent (htmlElement, eventName, eventFunction) {
if (htmlElement.attachEvent)
htmlElement.attachEvent("on" + eventName, function() {eventFunction.call(htmlElement);});
else if (htmlElement.addEventListener)
htmlElement.addEventListener(eventName, eventFunction, false);
}
}
};
// SharePoint default DOM onLoad function
ExecuteOrDelayUntilBodyLoaded(SP2013QLAccordion.init);
</script>
<!-- end here accordian panel -->
Step 6 : Go to url : http://yakovenkomax.com/converting-sharepoint-2013-quick-launch-to-accordion-menu/
Step 7: Download the JQuery file and upload that in SharePoint.
Step 8: Refer the JQuery File Path in Master Page's html file like <link rel="stylesheet" type="text/css" href="css/SP2013Accordion.css" />.
Step 9: Check in the files and refresh the broswer you shall have accodion implemented in your left navigation / Quick Launch menu.
Finally, I must say I have implemented these steps by follow article placed here : http://yakovenkomax.com/converting-sharepoint-2013-quick-launch-to-accordion-menu/.
.
