Creating tabbed windows in Sharepoint with jQuery

To get this working you need a Page Layout. I use one for our Home Page, called SiteHomePage.aspx. Open the page in your favorite editor (or take Sharepoint Designer), grab a cup of coffee and get started!

Set up the base structure with XHTML
I first started by creating the base structure. This is basically nothing else than a list with the Tab-titles and some DIVS for the Tab-content. The Tab-content will be added later using Web Part Zones.

• Test


• Tab 2


• Tab 3

Adding layout using CSS
Next, you need some CSS to make it display like tabs. I used these styles:

#tabs ul.tabNavigation{
margin: 0;
padding: 0;
list-style: none;
height: 22px;
/* Push the tabs 1px down to hide the top-border of the tabbedWindow */
position: relative;
top: 1px;
}
#tabs ul.tabNavigation li{
float: left;
padding: 0;
margin: 0 5px 0 0;
background: none;
}
#tabs ul.tabNavigation a{
background: url("tab_out.gif") no-repeat 0 0;
width: 172px;
display: block;
padding: 4px 0 3px;
}
#tabs ul.tabNavigation a.selected{
background-image: url("tab_click.gif");
}
#tabs ul.tabNavigation a span{
padding: 0 10px;
}
#tabs div.tabbedWindow{
padding: 10px;
background-color: #ecf4f2;
border: 1px solid #998b7d;
}
And finally, jQuery
Now you only need the magic to get this clickable - and that's where jQuery jumps in. I use the PlaceHolderAdditionalPageHead to load the jQuery library and the JavaScript functions in the header of the page.





That's all it takes to get it working. Smooth, easy and simple. And highly effective, I really like the way it works!