The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

jQuery Chaos Tabs : jQuery tabs plugin

Plugin rate :

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 (https://shopplugin.com), but has turned into an overall nice solution.

Implementation: 

Example Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
    <head>
        <script src="http://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>

Features

  • 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.

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.4
Current version
1.2.1
Browsers compatibility
Google ChromeIE 7IE 8IE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [0]