Need Pop Open Boxes Script Or Tutorial

I'm not sure what the proper term is, so let me give you an example. Imagine visiting a web page and reading the following:

My Groups
Weather
Trivia

If you click "My Groups," an element pops open displaying a list of names. I'm not talking about a pop-up windows that you can move around. This is part of the page. It's invisible until someone clicks "My Groups."

If you click "Weather," another element opens, displaying information on the weather. Clicking "Trivia" opens a box with trivia questions.

I wonder if someone could point me to a good script or tutorial that explains how to do this. I think my preferred default setting would close all the other elements when you open a new element. For example, if you click "Weather," then the Weather box opens, but everything else closes.

However, it would be nice to have the flexibility to modify the open-shut mechanism.

I already have a script that does this, but it got mangled somehow. It requires an included JavaScript file and a style sheet working in tandem, and I haven't been able to recreate it. So I'd like to go back to square one and hopefully find an even better script - one that's a little more user friendly and/or versatile.