Degradable Tabs With jQuery UI

1
Sep/092

Degradable Tabs With jQuery UI

Creating tabbed content is easy with jQuery UI. Using a simple HTML layout and calling the tabs function is all it takes. Here, I'll show you how to make a degradable tabbed interface. That is, we'll make it so the page is still readable when JavaScript is disabled. This involves hiding and showing elements using JavaScript before enabling tabs.

See the live demo. Try turning off JavaScript to see how it degrades.

Here is the HTML of the tab widget. By default, UI tabs use an unordered list with anchor links as the tabs and corresponding div tags with the content. The list starts hidden and will be shown with JavaScript, and each section has a heading that we will hide if JavaScript is enabled.

<div class="tabs">
  <ul class="tabmenu hidden">
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
    <li><a href="#tab-4">Tab 4</a></li>
  </ul>
  <div id="tab-1">
    <h2>Tab 1</h2>
    <p>Content of tab 1</p>
  </div>
  <div id="tab-2">
    <h2>Tab 2</h2>
    <p>Content of tab 2</p>
  </div>
  <div id="tab-3">
    <h2>Tab 3</h2>
    <p>Content of tab 3</p>
  </div>
  <div id="tab-4">
    <h2>Tab 4</h2>
    <p>Content of tab 4</p>
  </div>
</div>

We only need one CSS class to apply to hidden elements:

.hidden {
	display: none;
}

Here's the JavaScript. The first line shows the tab menu, the second line hides the headings, and the last line enables the tabs.

$(function() {
	$(".tabmenu").removeClass("hidden");
	$(".tabs h2").addClass("hidden");
	$(".tabs").tabs();
});

Finally, here is the complete example page:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.hidden {
	display: none;
}
</style>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
	$(".tabmenu").removeClass("hidden");
	$(".tabs h2").addClass("hidden");
	$(".tabs").tabs();
});
</script>
<title>Degradable jQuery UI Tabs</title>
</head>
<body>
<h1>Degradable jQuery UI Tabs</h1>
<div class="tabs">
  <ul class="tabmenu hidden">
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
    <li><a href="#tab-4">Tab 4</a></li>
  </ul>
  <div id="tab-1">
    <h2>Tab 1</h2>
    <p>Content of tab 1</p>
  </div>
  <div id="tab-2">
    <h2>Tab 2</h2>
    <p>Content of tab 2</p>
  </div>
  <div id="tab-3">
    <h2>Tab 3</h2>
    <p>Content of tab 3</p>
  </div>
  <div id="tab-4">
    <h2>Tab 4</h2>
    <p>Content of tab 4</p>
  </div>
</div>
</body>
</html>

Enjoy this article?

Consider subscribing to our rss feed!

Author: Steve

Steve is the owner of UlraMega Tech. He is a freelance Web designer and developer who specializes in PHP and AJAX development.

Tagged as: CSS, degradable, JavaScript, jQuery, jQuery UI

2 Comments

« What’s New in TempServers.com Beta 2.1?

5 Basic PHP Security Tips »

Comments (2) Trackbacks (0) ( subscribe to comments on this post )

pooja
September 29th, 2009

I need this code for my asp page.thanks for writing very easy code

( REPLY )
nath
October 27th, 2009

thanks .. solved a problem that I’d had for ages.. thanks

( REPLY )

No trackbacks yet.