Question

Im trying to animate some elements with jQuery.
The elements have the same classes and id’s since the info in the elements are ‘fetched’ from a database.

My problem is that when i click on the elements, all of the hidden things pop up, and i want to only show the user clicked’s information. Not all of them.

In the head i got this:

<script> 
    $(document).ready(function() {
        $("#new_user").click(function() {
            $(".new_users_box").animate({height: 'toggle' });
        });
    });
</script>

What i am animating is this:

while ($row = mysql_fetch_array($result))
{
    $thumb1 = $row['user_thumb1'];
    $new_id = $row['id'];
    $new_user = $row['username'];

    echo '<a id="new_user" class="box_round"
             style="background-color:#101010 !important;">'.$new_user.'</a>
          <div class="box_newest new_users_box" style="display:none;">
             <p>'.$new_user.'</p>
          </div>';
}

Does anyone know how i can fix this?

Answer 1

You should be referring to $(this) instead of $('.new_users_box') inside your click handler. $(this) will select the element that triggered the event whereas selecting a class (everything marked by a . in front) will probably select a couple of elements (which is why it will show you all of them in your case).