Sharepoint Quick Launch Collapsible Menu

[jchan1979]

Hi everyone, first time poster here. I am trying to find my jquery legs, so please bear with me..

I have used some jquery code to collapse my quick launch menu in sharepoint 2010. The code works well if all the menus are collapsed, however I want to make it so I select which parts of the menu remain ‘open’ while others closed. I found I could directly choose the children ul to keep open using

 "$("#s4-leftpanel-content ul.root>li.static>ul.static:eq(1),#s4-leftpanel-content ul.root>li.static>ul.static:eq(2)").css("display","block"); " 

and it works BUT it makes it so I have to click twice to collapse the “open” ul. Is there a way to select which ul stay open, place a “minus” sign beside it and when they click the header link of those “open” ul, have it collapse on the first click instead of having to go through clicking it twice to collapse it? I am a jquery newbie so I hope i’ve explained this properly!! I am sure it has to do with the toggle code, but I am unsure of how I can specify for these selected “open” ul have it go to a specific toggle that “hides” the ul on first click instead of show, then hide..

$(document).ready(function() {

$("#s4-leftpanel-content ul.root>li.static>a").css("margin-left","9px");

$(".s4-ql ul.root ul> li.static>a").css("margin-left","15px");

$("#s4-leftpanel-content ul.root>li.static").css("background","url('/_layouts/images/plus.gif') no-repeat 5px 7px");

makeLNCollapsible();

});

var flg = 0;

function makeLNCollapsible()

{

$("#s4-leftpanel-content ul.root>li.static>a").toggle(

function () {

$(">ul", $(this).parent()).show("fast");

$($(this).parent()).css("background","url('/_layouts/images/minus.gif') no-repeat 5px 7px");

},

function () {

$(">ul", $(this).parent()).hide("fast");

$($(this).parent()).css("background","url('/_layouts/images/plus.gif') no-repeat 5px 7px");

}

);

$("#s4-leftpanel-content li.static>ul.static").css("display","none");

$("#s4-leftpanel-content ul.root>li.static>ul.static:eq(1),#s4-leftpanel-content ul.root>li.static>ul.static:eq(2)").css("display","block");

$selectedEntry = $('li.static>ul.static .selected');

if($selectedEntry.length>0) {

$selectedEntry.parent().css("display", "block");

}

$selectedEntry = $('li.static.selected');

if($selectedEntry.length > 0) {

$selectedEntry.children('ul.static').css("display", "block");

}

}

Thank you so much for anybodys time and effort to help me out!

[Billy]

You can use something called toggle(); like this:

$('.someSelector').click(function () {

$(this).toggle();

});

That bit of code basically means that whenever you click something with the class of ‘someSelector’, the one that is clicked is shown if it were invisible, and is hidden if it were visible.

[Author]

Posts