Accordion Effects by Script.aculo.us

Demo

Try

Accordion Effect.

Download

download:

Accordion 1.0

license:

MIT License, same as script.aculo.us

What is this?

On Rico site, it shows as Accordion Exmple, and you can see the top page of Moo.fx (it's called fx.Accordion in their Documentation page) as well. I made a similar effect only with Script.aculo.us. You can try its working demo from the link on the top. In short, this is a way to show several panels, which you can only see ONE panel at one time, and choose the one you see by clicking on it.

There is an implementaion on Wiki of Script.aculo.us, but it seems like no scalability at all (put unique id on each panel? NO WAY!), I made by myself for my purpose.

How to use it?

Of course, you need to have prototype.js and scriptaculous.js(?load=effects). After loading these two, you can do like..

<script type="text/javascript" src="accordion.js"></script>

in order to load the script.

And then, here is an example of Accordion-behavior HTML elements.

<div id="accordion">

   <div class="panel">
      <h3>Item 1</h3>
      <div class="panelBody">
         <p>Something something.</p>
      </div>
   </div>

   <div class="panel">
....
</div>

Here comes a list of spec.

• “Accordion” must be marked-up by a Block element with unique ID.
• Each panel must be marked-up by a Block element with class name of “panel”
• Each panel must have a heading element (doesn' have to be HTML's HEADING element, such as H1, H2.. in terms of meaningful mark-up, it is strongly recommended though)
• Each panel must have a body element, and be given a class name of “panelBody”.

Finally, you can instantiate the class, like following.

var acc = new Accordion("accordion", "h3", "acc");

Accrodion class (basically) accepts 3 arguments.

1. Id name of entire Accordion elements
2. Tag name of each panel's heading element
3. Instance name (technically, it is just a variable name in global context, which points to Accordion Object )

Other

You can actually change the class name of Panel Element (“panel” as default) and Panel Body Element (“panelBody” as default). When you instantiate Accordion Object, you can put customized a class name of Panel Element as a fourth argument, and Panel Body Element as a fifth.

Enjoy!!