This post will show you how to create a tabbed interface using Sharepoint Designer and some basic jQuery skills. I do not profess to know everything about jQuery, but this is getting the job done hopefully without too sloppy of code. Watch the screencast (no audio), then follow the instructions below.

Click to skip ahead:
Setup
Create the Tab Structure
Create the Panel Structure
Add the jQuery
Full Code + CSS

Setup

Create a blank aspx page in Sharepoint Designer. Other than that top 5 lines of Sharepoint code that all begin with “<%", take everything else out. The two things you will need are 1) the placeholder for additional page head for holding any css and the jQuery scripts,

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

and 2) the main placeholder, for holding the actual tabs.

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

Create the Tab Structure

You'll create the tabs with an unordered list. It's important to give each tab two classes. One that designates it as a tab (mine is "choice"); one that designates which division it is (mine is "hs" or "ms", etc.); and you'll also want to make one tab activated by default. This is done by adding the CSS class "activated". You could also do this with jQuery if you wanted. Check the code at the bottom for all of the wrapping divs that will work with jQuery.

<ul class="div-nav">
<li class="choice show-hs activated">High School</li>
<li class="choice show-ms">Middle School</li>
<li class="choice show-es">Elementary School</li>
</ul>

Create the Panel Structure

Each panel needs two classes as well. One will designate it as a panel (mine is "webpart"); and one will designate which division it is (again, "hs", "ms", etc.). For testing purposes just put some plain text in each panel so you can confirm the tabbing is working. After that, you can put anything inside. For instance, on my production page I am loading 16 (yes, a bit worrisome) Content Query WebParts, yet only a few are showing at a time because of my tab system. Again, check the code at the bottom for all of the wrapping divs that will work with jQuery.

<div class="webpart hs">High School Stuff</div>
<div class="webpart ms">Middle School Stuff</div> 
<div class="webpart es">Elementary School Stuff</div>

Add the jQuery

First, make sure you're calling the jQuery script (I have a local copy installed). Then I'll split up my code into several parts and explain it.

I've wrapped everything in a function that runs when the tabs are loaded and ready to go:

$("ul.div-nav").ready(function(){
});

Then I hide all of the panels, and fade in the first one (in this case the High School panel, as I have the High School tab activated).

$("#daily-wrapper .webpart").hide();
$("#daily-wrapper .webpart.hs").fadeIn('slow');

Next I set the tab magic. Each tab needs to have a toggleClass attribute attached to it so you'll know which tab you're on. Then you'll want to deactivate the activated class on all other tabs.

$("ul.div-nav li.choice").click(function(){$(this).toggleClass("activated")});
$("ul.div-nav li.choice").click(function(){$(this).siblings("ul.div-nav li").removeClass("activated")});

Finally, anytime a tab is clicked I fade everything out, and then only fade in the particular panel that the tab calls for.

$("ul.div-nav li.choice").click(function(){$("#daily-wrapper .webpart").fadeOut('fast')});
$("ul.div-nav li.show-hs").click(function(){$("#daily-wrapper .webpart.hs").fadeIn('slow')});
$("ul.div-nav li.show-ms").click(function(){$("#daily-wrapper .webpart.ms").fadeIn('slow')});
$("ul.div-nav li.show-es").click(function(){$("#daily-wrapper .webpart.es").fadeIn('slow')});

As you can see, it's actually quite basic. I'm sure there are some things here against best practice, and definitely let me know if you find a better way of accomplishing this. But this seems to work for us.

Full Code (CSS Below)

<%@ Register tagprefix="WebControls" namespace="Microsoft.SharePoint.Publishing.WebControls" assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%-- _lcid="1033" _version="14.0.4762" _dal="1" --%>
<%-- _LocalBinding --%>
<%@ Page language="C#" MasterPageFile="~masterurl/default.master"    Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document"  %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript" src="/Style Library/scripts/jquery.js"></script>
<script type="text/javascript">
$("ul.div-nav").ready(function() {
	$("#daily-wrapper .webpart").hide();
	$("#daily-wrapper .webpart.hs").fadeIn('slow');
	$("ul.div-nav li.choice").click(function(){$(this).toggleClass("activated")});
	$("ul.div-nav li.choice").click(function(){$(this).siblings("ul.div-nav li").removeClass("activated")});
	$("ul.div-nav li.choice").click(function(){$("#daily-wrapper .webpart").fadeOut('fast')});
	$("ul.div-nav li.show-hs").click(function(){$("#daily-wrapper .webpart.hs").fadeIn('slow')});
	$("ul.div-nav li.show-ms").click(function(){$("#daily-wrapper .webpart.ms").fadeIn('slow')});
	$("ul.div-nav li.show-es").click(function(){$("#daily-wrapper .webpart.es").fadeIn('slow')});
});
</script>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<div id="daily-wrapper">
<ul class="div-nav">
<li class="choice show-hs activated">High School</li>
<li class="choice show-ms">Middle School</li>
<li class="choice show-es">Elementary School</li>
</ul>
<div class="content">
<div class="calendar">
<h2>Calendar</h2>
<div class="webpart hs">High School Stuff</div>
<div class="webpart ms">Middle School Stuff</div> 
<div class="webpart es">Elementary School Stuff</div>
</div>
</div>
</div>
</asp:Content>

Full CSS

#daily-wrapper ul.div-nav li {
	font-size:1.2em;
	margin:0px;
	border-right:1px solid #fff;
}
#daily-wrapper .calendar {
	position:relative;
	border:0px solid #333;
	width:67%;
	float:left;
}
#daily-wrapper .calendar {
	margin-right:19px;
	width:30%
}

#daily-wrapper .content .calendar h2 {
	color:#fff;
	text-indent:-9999px;
	height:64px;
	background: #fff url('/Style Library/images/calendar-header.jpg') no-repeat top left;
	margin-bottom:20px;
}

ul.div-nav {
	width:100%;
	background:#999;
	float:left;
	text-align:center;
}
ul.div-nav li {
	display:block;
	float:left;
	color:#fff;
	text-decoration:none;
	padding:10px;
}
ul.div-nav li:hover {
	background:#b80000;
	cursor:pointer;
}
ul.div-nav li.activated {background:#b80000;}