Quick and simple, lightweight jQuery tabbed functionality for content navigation.
HTML CSS JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
simple-tabs.html
simple.tabs.css
simple.tabs.js

README.md

Synopsis

Simple lightwight HTML/jQuery tabbed content. Quickly create tabbed content containers with a simple and lightweight jquery function and basic html mark up.

Markup

  1. Create a container:
<div class="simple-tabs">
	-- content will go here --
</div>
  1. Create the tab navigation:
<ul class="simple-tab--nav">
    <li class="active"><a href="#">Tab One</a></li>
    <li><a href="#">Tab Two</a></li>
    <li><a href="#">Tab Three</a></li>
</ul>
  1. Create the tabs:
<ul class="simple-tab--panels">
    <li class="simple-tab--panel active">
        <h2>Tab 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis felis lectus, eu molestie metus dictum in. Morbi a nulla id orci vehicula viverra. Aenean arcu nulla, convallis et quam vitae, vestibulum tempor lorem.</p>
    </li>
    <li class="simple-tab--panel">
        <h2>Tab 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis felis lectus, eu molestie metus dictum in. Morbi a nulla id orci vehicula viverra. Aenean arcu nulla, convallis et quam vitae, vestibulum tempor lorem.</p>
    </li>
    <li class="simple-tab--panel">
        <h2>Tab 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis felis lectus, eu molestie metus dictum in. Morbi a nulla id orci vehicula viverra. Aenean arcu nulla, convallis et quam vitae, vestibulum tempor lorem.</p>
    </li>
</ul>

JS

  1. Include the Javascript funciton after your jQuery call

  2. Enable the function in you projects JS:

$('.simple-tabs').simple_tabs();

Demo

See the basic functionality here.