Help with if...else in CSS

I think that's what I need.

I use this code on a menu:

function show(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i))
{document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}

}

Code (markup):

When you click the header, it uses this function to expand a submenu. (There are 4 headers, or categories: smenu1, smenu2, smenu3, smenu4.) It works fine, but when you click the header again, I want the submenu to contract.

I am too new at CSS to figure it out; I've tried a few permutations but can't get it.

Isn't it possible (and easy ) to do this all in the show function? I'm having trouble following the steps in the above code (yeah, I know it's simple) so I am not sure what needs to be done.

Thanks.

 

This is JavaScript and DOM, rather than CSS. Perhaps it's a good idea to research a bit into what CSS, JavaScript and the DOM is.

Maybe this would be a good base to start from:

http://alistapart.com/articles/dropdowns/