Hi i have around 40 links which will be coming in the navigation , is there a way to collapse it there so that my LEFT HAND NAVIGATION doesn't gets too long?

Enable the Expand and Collapse(accordion) menu in the Current Navigation.

<script>
function expandedSelected()
{
var s = $(“div.noindex ms-core-listMenu-verticalBox>ul.root>li.static>ul.static>li.selected”).parent
var p=s.parent();

p.find(‘ul’).css(“display”,””);
p.find(‘ul’).attr(“data-hide”,1);
}
function hideOtherItems()
{
$(“.ms-core-navigation ul.root ul”).each(function(){
if($(this).attr(“data-hide”)!=1) $(this).hide(“slow”);
});
}

function resetDataHideAttr()
{
$(“.ms-core-navigation ul.root ul”).each(function(){
$(this).attr(“data-hide”,0);
});
}

$(document).ready(function()
{
$(‘.ms-core-navigation ul.root ul’).hide();

$(‘.ms-core-navigation ul.root > li.static > span.menu-item’).hover(
function() { $(this).css(“cursor”, “hand”);},
function() { $(this).css(“cursor”, “default”);});

$(‘.ms-core-navigation ul.root > li.static > span.menu-item’).click(
function() {
var p=$(this).parent();
if($(‘ul’ , p).attr(“data-hide”)==1)
{
$(‘ul’ , p).attr(“data-hide”,0);
$(‘ul’, p).hide(“fast”);
}
else
{
resetDataHideAttr();
$(‘ul’ , p).attr(“data-hide”,1);
$(‘ul’, p).show(“fast”);
hideOtherItems();
}
});

expandedSelected();

});</script>
<style>
.ms-core-navigation ul.root li.static
{
padding-bottom:1px;
}
.s4-specialNavLinkList
{
display:none;
}
.ms-core-navigation ul.root li.static ul.static li.static.selected
{
padding-top:1px;
}

.ms-core-navigation ul.root > li > .menu-item, .ms-core-navigationheader, .ms-core-navigationheader:visited
{
background: #4599c3;
color: #ffffff;
}</Style>
  • Better add a source/link to the code. As for now the quotes are bad formatted. (“ and ” instead of "). – Christoffer May 9 '17 at 6:48
  • Great! But do i need to pass any reference js files, i just implemented , its only coloring up the headings, functionality is not working. @Hardik – OM-ॐ May 9 '17 at 6:51
  • You might need to add jQuery UI 1.10 or jQuery UI 1.9 – Hardik May 9 '17 at 6:58

The whole set of codes is as follows-

<script>
$(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 () {  
                ContractQuickLaunchSection($(this));            
            });                                                 
            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;');
}
</script>
<style>
#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;
}
</style>

Yo can setup menu level to 1 (StaticDisplayLevels attribute and the MaximumDynamicDisplayLevels attribute), hiding the child links:

https://docs.microsoft.com/en-us/previous-versions/office/developer/sharepoint-2010/ms466994(v=office.14)

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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