Show/hide script in jQuery shows only last hidden div

Question

my simple script here

$(".showHide").click(function (e) {
    e.stopPropagation();
    $(".showHide").children('.showHide').toggle();
});

$(".modal-inside").click(function (e) {
    e.stopPropagation();
});

$(document).bind('keydown', function(e) { 
        if (e.which == 27) {
            $(".showHide").children('.showHide').hide();
        }
    });

It shows only last hided div, but I want it to show only direct child.

http://jsfiddle.net/yqaxqq6m/

Answer 1

You need $(this) instead of $(".showHide") to get the children of event source element.

Live Demo

$(".showHide").click(function (e) {
    e.stopPropagation();
    $(this).children('.showHide').toggle();
});

Edit to hide when click out side .modal-inside you can use mouseup

Live Demo

$(".showHide").click(function (e) {
    e.stopPropagation();
    $(this).children('.showHide').toggle();
});

$(".modal-inside").click(function (e) {
    e.stopPropagation();
});

$(document).on('mouseup',  function(e) {  
    if (e.target.className != "modal-inside") {
        $(".showHide").children('.showHide').hide();
    }
});