Home > SharePoint Advancements > Accordion Left Side Navigation using JQuery for SharePoint 2007

Accordion Left Side Navigation using JQuery for SharePoint 2007

There might be a requirement for you to create an accordian effect on the left side navigation of your SharePoint site or you might just simply want to “dress” up your SharePoint site a little.  This can be accomplished by the use of a Content Editor Web Part and a little bit of Jquery referencing the google jsapi API.

To accomplish this, just add a Content Editor Web Part to your page.

Edit the Content Editor Webpart and paste the following JQuery script below into the “Source Editor…”

<script src=”http://www.google.com/jsapi”></script
<script> 
// Load jQuery 
google.load(“jquery”, “1.2.6”); 
</script> 
<script> 
$(function(){ 
//initialize menus 
var menuRows = $(“[id$=’QuickLaunchMenu’] > tbody > tr”); 
var menuHd = menuRows.filter(“[id!=”]:has(+tr[id=”])”); 
//set img path for when submenu is hidden 
var closedImg = “/_layouts/images/Menu1.gif”; 
//set img path for when submenu is visible 
var openedImg = “/_layouts/images/ptclose.gif”; 
var cssInit = { 
“background-image”: “url(‘”+closedImg+”‘)”, 
“background-repeat”: “no-repeat”, 
“background-position”: “100% 50%” 

var cssClosed = {“background-image”: “url(‘”+closedImg+”‘)”} 
var cssOpen = {“background-image”: “url(‘”+openedImg+”‘)”} 
//hide submenus 
menuRows.filter(“[id=”]”).hide(); 
//apply initial inline style to menu headers 
menuHd.find(“td:last”).css(cssInit); 
menuHd.click(function () { 
var styleElm = $(this).find(“td:last”) 
var nextTR = $(this).next(“tr[id=”]”); 
if (nextTR.is(‘:visible’)) { 
nextTR.hide(); 
styleElm.css(cssClosed); 
} else { 
nextTR.show(); 
styleElm.css(cssOpen); 

}); 
}); 
</script>

Apply and save your changes.

You should now see the left side navigation collapse in accordion style.  If you click the down arrow next to each section (Documents, Libraries, etc) you will see the left side navigation un-collapse and display elements under each section.

Enjoy!

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: