How to use Tabify

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.

Home
Guestbook
Links

Content for Home
My guestbook
Links

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();

This Jquery plugin makes creating accordions pain free. Just create an ul list and call the accordion javascript method and it is all done! Also it is super lightweight, just around 0.5kb. This Accordion script sets no limit for the depth of your accordion. You can make it as many level as you want.

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