How do I create an accordion box using JavaScript?

What I want is this:

Start:                        End:
----------------          ----------------
|asdf          |          |              |
----------------          |   stuff      |
                          |           开发者_如何学Go   |
                          |              |
                          ----------------
                          |     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.

How could I do this?

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.

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.