Hiding/Showing divs using Scriptaculous

Question

What I'm trying to do is give my user 4 options (simple links). If the click one of these, a div below is shown based on their selection. The issue I'm having is figuring out how to hide the div below if another top link is clicked. Right now I'm able to show all 4 sub-divs at the same time, where it should hide the currently visible one, then show the new one.

Any help?

Thanks!

Answer 1

This assumes all children of container_id are divs:

function show_item( container_id, item_id ) {
allItems = $(container_id).getElementsBySelector( 'div' );
$A(allItems).each(Element.hide);
$(item_id).show();
}

Answer 2

$$('.sub-selection').each(Element.hide);
$('#selected_element').show();