How do I create an accordion box using JavaScript?

Question

What I want is this:

Start:                        End:
----------------          ----------------
|asdf          |          |              |
----------------          |   stuff      |
                          |              |
                          |              |
                          ----------------
                          |     asdf     |  
                          ----------------

When you click asdf it should end up looking like the End box but the 'stuff' box should appear gradually so it looks like the asdf box is pulling down the stuff menu. When asdf is clicked again it should look like the stuff box is pulling up the asdf box and end at the Start position.

Any tutorials on doing things like this?

Answer 1

I would take a look at Scriptaculous.

Answer 2

I realize that this may be heavier of a solution than you'd like (or you don't wish to use jQuery at all) but you may want to consider the jQuery UI Accordion.

Update: Here is a pretty detailed jQuery UI Accordion tutorial by Dan Wellman at Packt.

Update 2: If you're not sold on using jQuery UI, here is a tutorial covering how to build an accordion with just the base jQuery library.

Answer 3

If for some reason you want to re-invent the wheel, you'll need to set up a function that's called periodically (via the setTimeout(), clearTimeout() or setInterval() and clearInterval() functions) to control the animation after establishing the state (open or closed) via a onclick handler.

However, the vast majority of people would just use jQuery or one of the other well known JavaScript frameworks, hence saving time and energy for other areas of functionality.

Answer 4

There's tonnes of ready to use accordions to download and use. You might wish to take a look at the following websites for loads of ready to use javascript based UI components:

http://www.dhtmlgoodies.com/

http://tutorialblog.org/10-javascript-accordion-scripts/

http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/

http://www.leigeber.com/2008/04/lightweight-javascript-and-css-accordion/

http://www.switchonthecode.com/tutorials/javascript-and-css-tutorial-accordion-menus

http://www.unwrongest.com/projects/accordion/

You can google a lot of similar resources.