Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A tiny tabbing plugin for jQuery
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
lib
src
.gitignore
README.md
index.html
styles.css

README.md

tinytabs

tinytabs is a tiny (1.1 KB minified) tabbing plugin for jQuery. All you need is a few layers in a container layer, and bam, tabbed interface.

Kailash Nadh, October 2011

License: MIT License

Documentation and Demo: http://kailashnadh.name/code/tinytabs

Thanks to Sascha Depold's contributions

Example

HTML - Setup

<head>
    <script type="text/javascript" src="lib/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="src/jquery.tinytabs.css"/>
    <script type="text/javascript" src="src/jquery.tinytabs.min.js"></script>
</head>

HTML - Usage

<div id="mytabs">
    <div class="section" id="music">
        <h3 class="title">Music</h3>
        Content here
    </div>

    <div class="section" id="videos">
        <h3 class="title">Videos</h3>
        Content
    </div>
</div>

Javascript

$(document).ready(function() {
    $('#mytabs').tinytabs();

    // or

    $('#mytabs').tinytabs({     // optional options
        anchor: false,
        hide_title: false
    });
});

Options

anchor true (default) or false
If enabled, when a tab is clicked, it's id is set in url's hashtag so that the tab is retained on page reloads. Also enables linking to a tab directly.
Eg: http://kailashnadh.name/tinytabs#tab-example
hide_title true (default) or false
Hide the title element within section elements.
section_class Section element's class. Default is section.
tabs_class Tab (ul) container's class. Default is tabs.
tab_class Individual tab's (li) class. Default is tab.
title_class Title element's tag. Default is title.
before A function that gets evaluated before a tab is activated. Default is nothing.
If a function is defined, the first parameter will be the tab (DOM-element), the second one is the title of the tab.
after A function that gets evaluated after a tab has been activated. Default is nothing.
If a function is defined, the first parameter will be the tab (DOM-element), the second one is the title of the tab.
Something went wrong with that request. Please try again.