One of the names for this is called an expansion list.
There are several nasty DHTML menu scripts that do this.
You can do a basic hide-show (also called toggle) using CSS with your Javascript.
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).
You can pre-style the class to have the stuff off-screen and hidden (if there are no links in that info, then setting the stuff off-screen with absolute positioning would be nicest… then those using old crappy screen readers don’t have to care if they have JS on or not, they’ll always be able to read all the info), and all Javascript will do is add or remove that class from the box wrapping the items.
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)
<h2>Activities</h2>
<h3><a href="void">+ Party at the Party Place</a></h3>
<dl> [b]<--here's where you'll be adding/removing the class[/b]
<dt>Time:</dt>
<dd>10pm-4pm</dd>
<dt>Venue:</dt>
<dd>The Party Place</dd>
<dt>Admission:</dt>
<dd>$0</dd>
</dl>
<h3><a href="void">+ Concert at the Stadium</a></h3>
<dl class="hide">
...
</dl>
<h3><a href="void">+ Stand-up Comedy at the Funny Place</a></h3>
<dl class="hide">
....
</dl>
What’s #void? it’s a url fragment that doesn’t exist. This means, for those without JS, if they happen to accidentally click on it, their page focus isn’t changed and nothing happens (so you’ll likely want to style these links to not look like links, except with a hover/focus/active style… OR you can add the links using Javascript so those without JS just don’t see any useless links : )
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
dl.hide {
position: absolute;
left: -999em;
}
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.
When the page loads for anyone who does have Javascript enabled, the first thing the script does after the page has loaded is throw the hide classes on all the dl’s, hiding them. So JS people see only the headers right away (what you want).
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.
