Question

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:

<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>

CSS:

#post
{
    background:#DDDDDD;
}
#postDetails
{
    display"none;
}

Jquery:

<script>
    $('#post').mouseenter(function() {
      $('#postDetails').slideDown("slow");
    });
    $('#post').mouseleave(function() {
      $('#postDetails').slideUp("slow");
    });
</script>

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.

Answer 1

If you have multiple elements then insted of using id’s use class.

Please see the jsfiddle. I changed some markup.

DEMO

http://jsfiddle.net/saorabhkr/xtrpK/1/