, ,

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:

About me