Smart SEO-friendly jQuery Tabs Plugin - Magic Tabs

Magic Tabs is a jQuery plugin that dynamically generates an SEO-friendly and easy-to-style tabs UI from headings (h2, h3, h4, etc.) and their following elements.

It will automatically create a tab for each heading, using the heading text for the tab link, and hide all content after the heading. When a tab is clicked, the associated content is shown. 

See Also:

• Smart User-friendly jQuery Accordion Plugin - Magic Accordion

How to use it:

1. Load the Magic Tabs plugin's script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.magic-tabs.js"></script>

2. Call the function magicTabs on your content container.

<div class="content">
  <h2>Tab 1</h2>
  <p>Tab 1 Content</p>

  <h2>Tab 2</h2>
  <p>Tab 2 Content</p>

  <h2>Tab 3</h2>
  <p>Tab 3 Content</p>

  ...
</div>

$('.content').magicTabs({
  // options here
});

3. Apply your own CSS styles to the tabs UI.

.magic-tabs-tabs { 
  /* tabs content */
}

.magic-tabs-tabs li { 
  /* tab */
}

.magic-tabs-tabs li.active { 
  /* active tab */
}

.magic-tabs-contents { 
  /* tabbed content */
}

.magic-tabs-contents li { 
  /* tabbed content */
}

.magic-tabs-contents li.active { 
  /* active content */
}

4. Available options to customize the tabs UI.

$('.content').magicTabs({

  // initial tabbed content
  openOnLoad : 1,

  // determine whether to auto-update the hashtag in the URL
  hashTrail : false,

  // default selector for tabs
  headingTag : 'h2',

  // default CSS classes
  bodyClass : 'body',
  headClass : 'head',
  activeClass : 'active',
  
});

5. Add a new tab to the tabs UI.

var magicTabs = $('.content').data('magic-tabs');
magicTabs.addTab( function( newTab ) {
  newTab.head = 'Tab 4';
  newTab.contents = '<p>Tab 4 content</p>';
});

6. Event handlers.

$('.content').magicTabs({
  // options here
})
.on( 'created.magic-tabs', function(e){
  console.log(e.tabs);
})
.on( 'opened.magic-tabs', function(e){
  console.log(e);
})
.on( 'closed.magic-tabs', function(e){
  console.log(e);
});

---

This awesome jQuery plugin is developed by lukesnowden. For more Advanced Usages, please check the demo page or visit the official website.