Mastered the accordion with MooTools « WiseCodes : Bringing You The Power of Code !!

Mastered the accordion with MooTools

Posted By Venu Thomas

Call accordion those dynamic elements of our Web pages that show an item to move the mouse (or click on it) to conceal the other components. This technique very convenient for displaying large amounts of information in a small space usually give a headache to match all the information.

With BySlideMenu never have problems. This is a MooTools plugin that allows us to make a wide variety of accordions, with very few lines of code.

HTML:

The HTML code we use to generate our accordion will be based on a list of elements:

^?View Code HTML

<ul id="pinclickmenu">
    <li><img src="creditcards.jpg" /></li>
    <li><img src="games.jpg" /></li>
    <li><img src="computer.jpg" /></li>
    <li><img src="eiffeltower.jpg" /></li>
    <li><img src="electronic.jpg" /></li>
</ul>

Each <li/> will be one of the elements that make up the accordion.

JavaScript:

^?View Code JAVASCRIPT

var pinclickmenu = new BySlideMenu('pinclickmenu', {pinMode: 'click'});

As we see fewer lines is impossible

Demos and Downloads:

You can see more demos and download the plugin from the project page.

Happy Programming!!!

Share on Facebook

Tags: HTML, JAVASCRIPT, OpenSource

This entry was posted on Wednesday, June 3rd, 2009 and is filed under HTML, JAVASCRIPT.

Share with others:

Thanks for visiting us! If you enjoyed these icons please feel free to share them! Or if you want to know what's going on with WiseCodes.com, follow us!

2 Responses to “Mastered the accordion with MooTools”

Hi,

Thanks for the link.
Did you try it?
I’am a beginner in js and I can’t make ot work.
here is the code which display a vertical list of images and not a dynamic menu:

Main Content

var slideMenu = new BySlideMenu();

Maybe the version of mootools is not right, but I don’t get any error.
Do you have an idea?

Thanks