This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more. I had seen a similar looking feature on the mootools homepage and set out the replicate the functionality as a standalone script and as lightweight as possible. The script will automatically adjust to the number of elements in the accordion and the dimensions of the accordion.
The front-end markup for the script is a simple unordered list as in the example below…
<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>
To build the accordion call the function below onload…
slideMenu.build('sm',200,10,10,1)
The first parameter is the id of the unordered list you would like to bind the accordion to. The second is the width you would like the accordion selection to expand to. The third is the timeout variable to control how quickly the sliding function is called. The fourth is the speed of the accordion with 1 being the fastest. The last is optional and is the integer that corresponds to the section you would like to be expanded when the accordion is loaded.
This script has been tested working in IE6, IE7, Firefox, Opera, and Safari. Please send any bug reports or questions to michael@leigeber.com. Feel free to use the script for any personal or commercial projects.
Click here to download the original script.
Click here to download the script that collapses onmouseout.
No comments:
Post a Comment