, ,

jQuery Chaos Tabs: jQuery tabs plugin

A Simple yet extendable jQuery tabs plugin that reformats existing html avoiding AJAX allowing for better SEO and easier implementation.

As of version 1.2.1 the generated HTML is fully HTML5 compliant. Legacy browser support is baked in for IE versions back to 7.
What is this useful for?

Any page were alot of information is required and broken down into sections using h2s, h3s, etc.

It was originally written to help improve the UI of product pages generated by the Shopp ecommerce plugin, but has turned into an overall nice solution.

Download: https://github.com/msigley/jquery-chaos-tabs

Demonstration:

Plugin homepage:https://github.com/msigley/jquery-chaos-tabs

Implementation:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="jquery-tabs.js"></script>
        <script>
        $(document).ready(function() {
            $('#chaos-tabs-group').simpleTabs();
        });
        </script>
    </head>
    <body>
        <h1>jQuery Chaos Tabs Example</h1>
        <!--This is default jump position for the tabs-->
        <div id="chaos-tabs-group">
            <div class="tab">
                <h2 class="tab-title">This is the title of tab 1</h2>
                <div class="tab-content">This is the content for tab 1</div>
            </div>
            <div class="tab">
                <h2 class="tab-title">This is the title of tab 2</h2>
                <div class="tab-content">This is the content for tab 2</div>
            </div>
        </div>
    </body>
</html>
  • Externally link directly to a specific tab
    http://example.com/#tab-Tab_title
  • Link to a specific tab from content on the same page
    <a href="#tab-Tab_title">Go to Tab</a>
  • Set the jump position of the tab by defining the HTML anchor on the page
    <div id="tab-Tab_title"></div>
    <a name="tab-Tab_title"></a>
  • Callback function support for when a tab is switched
  • Easy to implement via CSS classes
  • Graceful fallback for non-JS browsers like Google-bot.
  • Javascript event maintenance in tab content from source html.

Options:

Screenshots:

Creating a JavaScript Library

I recently wrote a JavaScript library for creating random colors and color schemes, and while I foun…

s3Slider jQuery Plugin & Tutorial

The s3Slider jQuery plugin is made by example of jd`s smooth slide show script. Usage: HTML: Sample …

jQuery Optimization: Avoid Unnecessary Selector

Common subexpression elimination is a common way to optimize any programming code. Doing unnecessary…

Fading Links Using jQuery: dwFadingLinks

Earlier this month, we posted a MooTools script that faded links to and from a color during the mous…

jQuery Flash Plugin

This jQuery plugin is for embedding Flash movies. Pages are progressively enhanced when Flash and Ja…

jQuery Optimization: Optimize Selector

We can also optimize our selector other than being a bit specific on our selector. The key to optimi…

jQuery drop down menu: droppy

Quick and dirty nested drop-down menu in the jQuery style. I needed a nav like this for a recent pro…