BoofPrerdow
New Member
I want to be able to show/hide specific text (using jqery). The issue is that I will have more than one version of this text tag with the same id, and I want to be able to perform the animation on a specific child when you hover over the parent, and not perform it on all of the text blocks with the same id.Here's my code:HTML:\[code\]<p>Move your cursor over the posts below to read more.</p><div id="postContainer"> <div id="post"> <h4>Title 1</h4> <h5>Date goes here</h5> <p id="postDetails">Blah Blah Blah, this text is hidden until you hover over it's own parent.</p> </div></div><div id="postContainer"> <div id="post"> <h4>title 2</h4> <h5>Date goes here</h5> <p id="postDetails">This is the second hidden text, but it is revealed when you hover over the first post as well.</p> </div></div>\[/code\]CSS:\[code\]#post{ background:#DDDDDD;}#postDetails{ display"none;}\[/code\]Jquery:\[code\]<script> $('#post').mouseenter(function() { $('#postDetails').slideDown("slow"); }); $('#post').mouseleave(function() { $('#postDetails').slideUp("slow"); });</script>\[/code\]Is there a way to reveal only one without creating a bunch of different div id with different names for each? There are 20-some boxes all like this (and they should all look identical) and I want to be able to reveal only one at a time, when the user hovers over that subsequent box, as revealing all 20 at the same time will greatly expand the page length and annoy the user.