Javascript toggle
Posted: Thu Sep 21, 2006 1:22 pm
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...
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?
Code: Select all
<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>