This is a lightweight (only 1kb), accordion type JavaScript horizontal menu that does not require any JavaScript frameworks.

It is very easy to setup as the script automatically adjusts to the number of elements in the accordion and the dimensions of the accordion.

How it works?

• Create an unordered list like this:

<ul id="sm" class="sm">
<li><img src="images/1.gif" alt="" /></li>
<li><img src="images/2.gif" alt="" /></li>
<li><img src="images/3.gif" alt="" /></li>
<li><img src="images/4.gif" alt="" /></li>
</ul>

• Call the function below onload

slideMenu.build('sm',200,10,10,1)">

• That’s all.

Parameters:

• First: id of the unordered list
• Second: width of the accordion
• Third: timeout variable to control how quickly the sliding function is called
• Fourth: speed of the accordion with 1 being the fastest
• Fifth: is the integer that corresponds to the section you would like to be expanded when the accordion is loaded (optional)

Tabbed content areas are a popular solution for the "lots of content - few space" problem.

Nettuts, a great tutorial website about web design & development has a nice example of creating a tabbed content area with jQuery & CSS.

When clicked to the tabs, content area switches to the new content with a slick accordion type effect.

Besides getting the ready to use codes from the tutorial, you can see how every step of the project is completed.

Here is the final demo of this tabbed content area.

Accordion navigations are very handy when you want to give information but have limited space.

This is one of the smallest accordion script which is extremely simple and easy to integrate. Doesn’t require any framework and fully cross-browser compatible.

Features:

- Small Accordion Javascript ( 1,149 bytes )
- Easy Integration.
- Doesn’t require any Framework.
- Can be used as a Tab system ( sample in the demo )
- Fully Cross-Browser Compatible
- Source Files Included.