I would like some assistance in how to create a function that can toggle open/closed it's child categories. I am going to use scriptaculous for the actual show/hide functionality. My question is how I could create a toggle on/off function. I don't know that much javascript, so any help is appreciated. This is what my list looks like...
<ul id="main_list">
<li id="cat1" onclick="toggleCat('cat1_list')"> Category 1
<ul id="cat1_list">
<li>Something in cat1</li>
<li>Something in cat1</li>
<li>Something in cat1</li>
<li>Something in cat1</li>
</ul>
</li>
<li id="cat2" onclick="toggleCat('cat2_list')"> Category 2
<ul id="cat2_list">
<li>Something in cat1</li>
<li>Something in cat1
<ul id="cat2-subcat1">
<li>Subcategory</li>
<li>Subcategory</li>
<li>Subcategory</li>
</ul>
</li>
<li>Something in cat1</li>
<li>Something in cat1</li>
</ul>
</li>
<li id="cat3" onclick="toggleCat('cat3_list')"> Category 3
<ul id="cat3_list">
<li>Something in cat1</li>
<li>Something in cat1</li>
<li>Something in cat1</li>
<li>Something in cat1</li>
</ul>
</li>
</ul>
What would be even cooler, is if the function was smart enough to just automatically know the chile ul's id... can somebody point me in the right direction?
//taken from the page matthijs posted, identical to my preferred way
function toggle(obj) {
var el = document.getElementById(obj);
el.style.display = (el.style.display != 'none' ? 'none' : '' );
}