JavaScript: In-page Tabs

Sometimes you have related content that do not warrant their own pages, so you'd like to put them all on the same page. Similar to accordions, JavaScript tabs will show/hide content on your page via mouse clicks or keypresses. These are in-page tabs which allow you to display a large amount of content on a single page.

There are two examples available:


Example #1 (just jQuery)

This is a really simple tabbed interface

Tab1 Content

Tab 2

Tab 2 content.

Tab 3

Tab 3 content

Tab 4

Tab 4 content. This is a link to tab #1.

Tips

  • Disable rich-text and add the example HTML code.
  • Fill in your the name of your tabs in each <a href="#tab-[number]">, as needed. Each tab link must also have a class of menu-internal.
  • Fill in your content in each <div id="tab-[number]">, as needed. You can, of course, change the tab IDs, but you must change it everywhere.
  • Add the example page JavaScript code to the page.
  • Linking to a particular tab can be achieved by adding class="menu-internal" to each link that links to another tab.

How-To: HTML

<div id="tabs">
 <ul class="tabs" id="tabsnav">
  <li><a href="#tab-1" class="menu-internal">Tab One</a></li>
  <li><a href="#tab-2" class="menu-internal">Tab Two</a></li>
  <li><a href="#tab-3" class="menu-internal">Tab Three</a></li>
  <li><a href="#tab-4" class="menu-internal">Tab Four</a></li>
 </ul>
 <div id="tab-1">
  <h3>This is a really simple tabbed interface</h3>
  <p>Tab1 Content</p>
 </div>
 <div id="tab-2">
  <h3>Tab 2</h3>
  <p>Tab 2 content</p>
 </div>
 <div id="tab-3">
  <h3>Tab 3</h3>
  <p>Tab 3 content</p>
 </div>
 <div id="tab-4">
  <h3>Tab 4</h3>
  <p>Tab 4 content. <a href="#tab-1" class="menu-internal">Link to tab #1</a>.</p>
 </div>
</div>

How-to: JavaScript

<script>
 jQuery(document).ready(function() {
  jQuery('#tabs > div').hide(); // hide all child divs
  jQuery('#tabs div:first').show(); // show first child dive
  jQuery('#tabsnav li:first').addClass('active');

  jQuery('.menu-internal').click(function(){
   jQuery('#tabsnav li').removeClass('active');
   var currentTab = jQuery(this).attr('href');
   jQuery('#tabsnav li a[href="'+currentTab+'"]').parent().addClass('active');
   jQuery('#tabs > div').hide();
   jQuery(currentTab).show();
   return false;
  });
  // Create a bookmarkable tab link
  hash = window.location.hash;
  elements = jQuery('a[href="'+hash+'"]'); // look for tabs that match the hash
  if (elements.length === 0) { // if there aren't any, then
   jQuery("ul.tabs li:first").addClass("active").show(); // show the first tab
  } else { elements.click(); } // else, open the tab in the hash
 });
</script> 

Top of Page