[SOLVED] Using toggle or animate for mutilple divs one class
I've searched thoroughly on google as well as this forum, and I haven't quite found what I need.
I'm going to have a page with a lot of content. Each section will have a title that can be used as a link to trigger the show/hide.
For example:
-
<p><a href="#" onclick="show-hide(); return false;">Section 1</a></p>
<div class="show-hide">
<p>Text goes here</p>
<p><a href="#" onclick="show-hide(); return false;">Close</a></p>
</div>
<p><a href="#" onclick="show-hide(); return false;">Section 2</a></p>
<div class="show-hide">
<p>Text goes here</p>
<p><a href="#" onclick="show-hide(); return false;">Close</a></p>
</div>
<p><a href="#" onclick="show-hide(); return false;">Section 3</a></p>
<div class="show-hide">
<p>Text goes here</p>
<p><a href="#" onclick="show-hide(); return false;">Close</a></p>
</div>
I have about 40 of these on one page.
Here's my jquery:
-
function show-hide(){
$("div.show-hide").animate({"height": "toggle"}, { duration: 500 });
}
When I click on the link (like Section 1), ALL the divs open. When I click 'Close', ALL the divs close.
I know I can create an id for each div, but that is a lot of markup and css.
How can I open and/or close each div class="show-hide" individually and keep the code to a minimum?
Thanks in advance.
PS Forgot to add that in my style sheet, I've set the class .show-hide to display: none;