slideToggle (Multiple Items)
I have searched many sites, including this forum, to try to find a solution that works for me, but have had no luck so I am posting here to see if someone can help me.
Problem: I have multiple h1 (each with an id equal to unix time stamp for the day). Each h1 has multiple h2. Each h2 has a single div. If you click on an h2, it has an onClick to slideToggle the div below the h2. I want to set an onClick on the h1 so that if you click on it, it will expand all the h2. I started by adding the same id of the unix time stamp as a suffix to the div below h1, but not sure how I can make it work.
HTML:
-
<div id="toggle">
<h1 id="1248911961">Wednesday July 29, 2009</h1>
<h2 onClick="jQuery('#toggle_179_1248739161').slideToggle('normal');">Item A</h2>
<div id="toggle_179_1248739161>Item A Info</div>
<h2 onClick="jQuery('#toggle_178_1248739161').slideToggle('normal');">Item B</h2>
<div id="toggle_178_1248739161>Item B Info</div>
<h2 onClick="jQuery('#toggle_177_1248739161').slideToggle('normal');">Item C</h2>
<div id="toggle_177_1248739161>Item C Info</div>
<h1 id="1248739161">Monday July 27, 2009</h1>
<h2 onClick="jQuery('#toggle_176_1248739161').slideToggle('normal');">Item 1</h2>
<div id="toggle_176_1248739161>Item 1 Info</div>
<h2 onClick="jQuery('#toggle_175_1248739161').slideToggle('normal');">Item 2</h2>
<div id="toggle_175_1248739161>Item 2 Info</div>
<h2 onClick="jQuery('#toggle_174_1248739161').slideToggle('normal');">Item 3</h2>
<div id="toggle_174_1248739161>Item 3 Info</div>
</div>
Thanks in advance!