It is very easy to use Tabify. All you need to do is to create an ul-list, fill it with a couple of li-elements with containing links (tabs) and create a couple of matching content divs. In the example below notice how the href-attribute on the link elements corresponds to the content div IDs.

<ul id="menu">
	<li class="active"><a href="#contentHome">Home</a></li>
	<li><a href="#contentGuestbook">Guestbook</a></li>
	<li><a href="#contentLinks">Links</a></li>
</ul>
<div id="contentHome">Content for Home</div>
<div id="contentGuestbook">My guestbook</div>
<div id="contentLinks">Links</div>

When you have created the necessary html code you need to include the javascript file with the plugin and call the tabify method.

$('ul').tabify();

How to use Accordion

It is very easy to use Accordion. All you need to do is to create an ul-list, fill it with a couple of li-elements and div-elements for the content; In the example below if you click on New York the div element containing Information about New York will show.

<ul>
    <li>
        <a href="#america">America</a>
        <ul>
            <li>
                <a href="#america-newyork">New York</a>
                <div>Information about New York</div>
            </li>
            <li>
                <a href="#america-sanfransisco">San Fransisco</a>
                <div>Information about San Fransisco</div>
            </li>
        </ul>
    </li>
    <li>
        <a href="#antarctica">Antarctica</a>
        <div>Information about Antarctica</div>
    </li>
</ul>

When you have created the necessary html code you need to include the javascript file with the plugin and call the accordion method. See the demo for a more detailed example.

$('ul').accordion();

Linking to a level inside the accordion

Notice the href-attributes on each a-element. If you in the html code example above create a link to #america-newyork and click it the accordion will open up ‘New York’ and all it’s parents.

Open a panel on load

Set the li classname to “current” and it will be open when the page loads.