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)

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Smarter And Good Looking Lists With Smart Lists
• Simple Accordion Script
• Practical Non-Ajax Image Gallery: easyAlbum
• Zoom Script With A Smart Interface: TJPzoom
• YUI Slideshow: Customizable And Animated Slideshows

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.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Winners Of The Flowplayer Contest
• Table Sorter Plugin For jQuery: tablesorter
• Smart Floating Banners
• Sliding Top Menu With jQuery
• Slideshow JS: Unobtrusive JavaScript Slideshow

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.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Lightweight JavaScript Accordion Menu (Only 1KB)
• Zoom Script With A Smart Interface: TJPzoom
• YUI Slideshow: Customizable And Animated Slideshows
• Wrap Content Around Images: jQSlickWrap
• What You See Is What You Ajax: WaveMaker