One of the names for this is called an expansion list.
There are several nasty DHTML menu scripts that do this.
Normally the most accessible way to do this (if this is fairly static info and you're not doing this with thousands of items) is to have all the information sitting in the HTML. A box of some sort wraps the stuff that is to show or hide, and this box has a class on it (call it whatever you want, but make sure you'll know what it means when you come back to it in 3 years, or 3 months).
If you don't know what HTML structure or CSS you want for this kind of setup, you can ask over in Web Design area, but you could use an unordered list, or nested lists, or just plain headers and p's and a dl... that's what I would do I think:
(I don't know the rest of the page structure so the h2 is just a guess by me... use the appropriate level header)
<h3><a href="void">+ Party at the Party Place</a></h3>
<dl> [b]<--here's where you'll be adding/removing the class[/b]
<dd>The Party Place</dd>
<h3><a href="void">+ Concert at the Stadium</a></h3>
<h3><a href="void">+ Stand-up Comedy at the Funny Place</a></h3>
In CSS you'd already have the styles for the definition list (if that's what you choose to use; I think it fits the data perfectly) and then after that
Because it goes to position: absolute, it's no longer in the flow and the boxes will rearrange their positions instead of leaving a gap. Unlike changing display to none and back, absolute positioning leave the data available for screen reader users who may have JS enabled but unaware that clicking the #void links changed the page (many readers use a virtual buffer that doesn't necessarily update after JS has made a change).
Now with no JS (so google and people like me always see everything all the time) there is no hide class.
Then the anchor that's inside the header (I'm playing it safe by putting an anchor in there, which has a click event that everyone knows about all the time) gets the click event. You could just not have an anchor and say "when the header is clicked" but I still haven't figured out how someone using a keyboard is going to get focus onto an unfocusable elmenet like header to click the thing in the first place...
The script can check to see if the hide class is there and when there's a click, if there's a hide class then remove it... if there isn't a hide class, then add it.
So you'd have one of those little pre-written helper functions called hasClass (checks to see if the element in question has the class), addClass and removeClass.
First thing is to have your structure already done and written and CSS'd. If that's already done and you don't know where to go next, post your current HTML code here.