My Javascript is quite basic. I know quite some css though. I want to script this dhtml menu:

so if you click all - everything to the right is selected (highlighted) - if you click on let's say "World Music" the list on the right needs to change accordingly. So i guess I need to create lots of divs will all the lists in them and make only one visible at a time??

also, would it make sense to use a library (I've got the YUI) for something like this?


PS: here's the according part of my html:
		<h1>1 Select a Genre. </h1>
		<div id="genre_wrap">
		<div id="cat_all">
			All >>
		<div id="cat_list">
				<li>Pop	Rock</li>
				<li>Jazz &amp; Blues</li>
				<li>Black Music</li>
				<li>HipHop & R'n'B</li>
				<li>World Music</li>
				<li>Classical Music</li>
		<div id="genre_connect">
		<img alt="connecting line" src="img/connect_cat_worldmusic.gif" id="connect_img">
		<div id="genre_all">
		<input checked type="checkbox" id="c0" /><label for="c0">All</label> >>
		<div id="genre_list">
				<li><label for="c1"><input checked type="checkbox" id="c1" />Africa</label></li>
				<li><label for="c2"><input checked type="checkbox" id="c2" />Asia</label></li>
				<li><label for="c3"><input checked type="checkbox" id="c3" />India</label></li>
				<li><label for="c4"><input checked type="checkbox" id="c4" />North America</label></li>
				<li><input checked type="checkbox" id="c5" /><label for="c5">South America</label></li>
				<li><input checked type="checkbox" id="c6" /><label for="c6">Europe</label></li>
				<li><input checked type="checkbox" id="c7" /><label for="c7">Australia</label></li>
				<li><input checked type="checkbox" id="c8" /><label for="c8">South Seas</label></li>
				<li><input checked type="checkbox" id="c9" /><label for="c9">Other</label></li>
		</div> <!-- end div genre -->