Skip to content

Building jQuery Tabs That Open & Close

jQuery is obviously a really powerful tool. If you’ve done any work with it, you don’t need convincing. My latest project involving jQuery was a bit tricky because I couldn’t find anything that detailed how to generate a tab once a user clicked on a link, and then how to close that tab if the user clicked the close button. Here is my setup:

  1. I needed to create a page with some static links, that when clicked on would spawn a new tab.
  2. The content area for each tab would contain a Close button that would remove the tab and hide the div contents. I didn’t want the div contents removed because I wanted users to be able to open the tabs again if they wanted to.

NOTE: I did attempt to dynamically generate the div contents by using a jQuery append statement on the content divs, but I ran into issues with this when placing a Telerik RadGrid onto the page and had to abandon that approach.

Building the above with the jQuery UI Tabs library took me part of the way there. In the end, my solution looks as follows:

Building the UI Tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div id="mytabs"> 
   <ul>
      <li><a href="#tabs-home">My Projects Home</a></li>
   </ul>
   <div id="tabs-home">
      <h3>Welcome to My Projects Home</h3>
      <p><a href="#" onclick="showTab('myActiveProjects', 'My Active Projects')">My Active Projects</a></p>
      <p><a href="#" onclick="showTab('mySalesActivities', 'My Sales Activities')">My Sales Activities</a></p>
   </div>
</div>
<div id="tabs-myActiveProjects" style="display:none;">
    <h3>My Active Projects</h3>
    <p><input type="button" name="killTab" value="Close" onclick="hideTab('myActiveProjects')" /></p>
</div>
<div id="tabs-mySalesActivities" style="display:none;">
    <h3>My Sales Activities</h3>
    <p><input type="button" name="killTab" value="Close" onclick="hideTab('mySalesActivities')" /></p>
</div>

Wiring Up The Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

function init()
{
    $("#mytabs").tabs();
}
 
function showTab(tabID, tabName)
{
    currentTabID = tabID;
 
    // this will add a tab via the standard method
    $("#mytabs").tabs("add","#tabs-" + tabID, tabName);
    $("#tabs-" + tabID).css("display","block");
 
    $("#mytabs").tabs('select', tabID);
}
 
function hideTab(tabID) 
{
    $("#tabs-" + tabID).css("display","none");
    $("a[href^=#tabs-"+ tabID +"]").parent().remove();
    $("#mytabs").tabs('select', 0);
}
 
$(document).ready(init);

Don’t forget to include the jQuery UI JS file and the corresponding CSS. You’ll also need to include the jQuery JS file as well. If you have any troubles with this, drop me a note.

1
2
3

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<link type="text/css" href="styles/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />

My next step with the above is to relocate the Close button so that it is an ‘X’ image on the tab itself that when clicked on would close the tab. I’ll update once I figure that out! Good times!

Posted in ASP.NET, SharePoint.

Tagged with .

3 comments

By shereen – October 27, 2009

3 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

Continuing the Discussion

  1. Tweets that mention Building jQuery Tabs That Open & Close Content | SharePoint Fun -- Topsy.com linked to this post on October 27, 2009

    [...] This post was mentioned on Twitter by Dave Bush, Larry King. Larry King said: Building jQuery Tabs That Open & Close Content | SharePoint Fun http://bit.ly/XqvPi #jQuery #Web #Dev [...]

  2. jQuery UI Tabs - Creating Closable Tabs | SharePoint Fun linked to this post on October 29, 2009

    [...] so this is really a follow up to my previous post where I outlined how to build jQuery Tabs that Open and Close. I did end that post with a small [...]

  3. Links (10/29/2009) « Steve Pietrek – Everything SharePoint linked to this post on October 29, 2009

    [...] Building jQuery Tabs That Open & Close [...]

You must be logged in to post a comment.

« SharePoint 2010 Keynote Overview jQuery UI Tabs – Creating Closable Tabs »