$(document).ready(function() {
$("#s4-leftpanel-content ul.root>li.static").css("border-bottom","1px Solid #eaeaea");
$("div.s4-ql div.menu-vertical > ul.root > li.static >a").each(function()
{
// Does this have children UL elements
if($(this).parent().children("ul").size() > 0){
//initial load hide
$(">ul", $(this).parent()).hide();
$($(this).parent()).addClass("cssClosed");
$("div.menu-vertical>ul.root>li.static>ul.static>li.selected").parent().css("display", "block");
$("div.menu-vertical>ul.root>li.static>ul.static>li.selected").parent().parent().addClass("cssOpen");
//add toggle
$(this).toggle(function() {
$(">ul", $(this).parent()).show("slow");
$($(this).parent()).removeClass("cssClosed");
$($(this).parent()).addClass("cssOpen");
},
function() {
$(">ul", $(this).parent()).hide("slow");
$($(this).parent()).removeClass("cssOpen");
$($(this).parent()).addClass("cssClosed");
}
);
}
});
});
The css:
.cssClosed {
background:url('/_layouts/images/Menu-right.gif') no-repeat 160px 7px;
}
.cssOpen{
background:url('/_layouts/images/Menu2.gif') no-repeat 150px 7px;
}
The result (closed):
The result (opened):
2 comments:
This is exactly what I was looking for. Thank you very much. I have one problem in this, images are not showing in the quick launch. Could you please help me on this? Thanks
I figured it out. They were hidden behind something, so I just had to set the positions right. Thanks again for the article.
Post a Comment