Question

I have multiple images loaded from my database, and at the bottom of each image I have a share button … When the share button is clicked a new div is appear with different share options.

My problem is when I press the share button … the hidden div is appear for all the images on the page and I want to appear only for one image not for all.

This is what I have until now:

HTML

<div id="wrapper">
    <a href="<?php echo $link; ?>"><img class="img-box" src="/images/<?php echo $img; ?>.jpg"></a>
    <div class="share-holder" name="<?php echo $img_id; ?>">share</div>
    <div class="share-fadein"></div>
</div>

CSS

.share-fadein{
    width:210px;
    height:40px;
    background-color:#eee ;
    display:none;
}

SCRIPT

$(document).ready(function(){
    $(".share-holder").click(function(){
        $(".share-fadein").fadeIn();
    });
}); 

Thank you

Answer 1

use this way: http://jsfiddle.net/9Wsfc/

$(".share-holder").click(function(){
    $(this).next(".share-fadein").fadeIn();
});     //--^^^^^^^^^^^^^^^^^^^^-------this will only fadesin the ".share-fadein"