Question

I have a problem : I use classes on a div for simplicity, I would like to show a hidden div after a click, but only on that div, the problem is it shows on all divs, and I can’t seem to get it working, here is a jsfiddle with the problem : http://jsfiddle.net/cWNvT/

HTML:

<div class="left">
    <a href="#" class="edit-click">Edit</a>
    <div class="edit">
        <p>edit here</p>
    </div>
</div>
<div class="left">
    <a href="#" class="edit-click">Edit</a>
    <div class="edit">
        <p>edit here</p>
    </div>
</div>
<div class="left">
    <a href="#" class="edit-click">Edit</a>
    <div class="edit">
        <p>edit here</p>
    </div>
</div>

JavaScript:

$(document).ready(function() {
    $('.edit').hide();
    $('.left a.edit-click').click(function() {
        $('.left').children().show();
    });
});​

Anyone have a solution for this ?

Answer 1

Try this working fiddle.

$(document).ready(function() {
 $('.edit').hide();
 $('.left a.edit-click').click(function(){
    $(this).parent().children().show();
 });
});

All I have done is use $(this).parent() instead of using your $(".left") selector.