Tabbed Content

release v 2013.3.13

Lots of content? Little space? Tabbed Content comes to the rescue.

This Javascript component lets you easily create tabbed content. All you need is "ul li" elements and a couple of related content divs.

Persistence

Setting <ul class="tabs" persist="true">...</ul> will turn on the persistence feature: the most recently clicked tab will be remembered even if the page is reloaded or revisited within the browser session.

Multiple Tab Contents

You can have multiple tab contents on the same page, with only one copy of the CSS and Javascript files.

Bookmark Support

You can also open a tab or a bookmark from a link anywhere on the page.

This is a paragraph with id="mark4".

By clicking the bookmark link at the bottom of this Tab Content, you will see me with this Tab Content panel being opened at the same time.

Opened by a link from another page

Link from another page can select a tab on the target page when loaded.

Example of bookmark support: Bookmark link to mark4

Free to use
Javascript (packed 3KB) driven. Search engine friendly.
On DOM ready
Start the tab content on DomContentLoaded instead of window.onload.
Persistence
Optional (default is off). If this feature is turned-on, the most recently clicked tab will be remembered even if the page is reloaded or revisited within the browser session.
Default Tab
Optional (default is the first tab). You can specify which tab and its tab content should be shown by default when the page loads.
Multiple Tab Contents
Support multiple Tab Contents on the same page
Select a Tab by a link from another page
A link from another page can select a tab on the target page when loaded.
Bookmark Support
Clicking a bookmark link can navigate to the target bookmark location with the opening of its containing tab content panel. The bookmark link can be in another tab content panel or anywhere on the page.
Wide browser support (including IE 6)

Download the source code by clicking the Download button at the top of this page, and put the downloaded tabcontent.js file and one of the template folders into your web application.
Insert the tabcontent.js and tabcontent.css links into the head section of your page
<link href="tab-content/template1/tabcontent.css" rel="stylesheet" type="text/css" />
<script src="tab-content/tabcontent.js" type="text/javascript"></script>
Add the tabs HTML and contents HTML to your page:
<ul class="tabs"> <li><a href="#" rel="view1">Features</a></li> <li><a href="#" rel="view2">How to Use</a></li> <li><a href="#" rel="view3">Source Code</a></li> </ul> <div class="tabcontents"> <div id="view1" class="tabcontent"> content 1 </div> <div id="view2" class="tabcontent"> content 2 </div> <div id="view3" class="tabcontent"> content 3 </div> </div>

Done. That's it.

If you need more features:

Persistence
Add persist="true" to the root UL element:
<ul class="tabs" persist="true">
Default Tab
Set class="selected" to the tab (LI element) that should be shown by default:
<li class="selected">Tab 3</li>
Bookmark Support
Suppose you have a bookmark within a Tab Content panel view2:
<div id="mark4">I'm within view2</div>

Then you can create a bookmark link that is within another Tab Content panel view1 (or anywhere on the page):

<a href="#" onclick="tabs.open('mark4');return false;">see mark4</a>

When the bookmark link is clicked, the view2 panel will open and the page will scroll to the mark4 location.

You can also set onclick="tabs.open('view2');return false;" to directly open the view2 panel.
Set a link from another page that can select a Tab on the target page
Add a hash sign and the id of the target content panel to the end of the link's URL (href). For example:
<a href="anotherpage.html#view2">see view2</a>
You can also use a bookmark id, e.g.
<a href="anotherpage.html#mark4">see mark4</a>

Navigation to a tab content via the bookmark link or via the link that is in another page has a default behaviour: after the tab is opened, the page will scroll to the target element so that it is viewable. Sometimes it is desirable and sometimes not. You can disable this behaviour by:

Bookmark: add another parameter true to the tabs.open function:
<a href="#" onclick="tabs.open('mark4',true)">see mark4</a>
Link in another page: add a query "noscroll=true" to the link URL:
<a href="anotherpage.html?noscroll=true#mark4">see mark4</a>