Close button on slide down div - jQuery

Question

I've created a pen: https://codepen.io/nickelse/pen/dROOGX

On the 2nd div I want the close button to the slide the parent div back up again, I can't figure out why it's not working, any suggestions?

$(".one").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    // do your worst, i.e. slide down
    $(".two").slideDown("slow");
});

$(".close").click(function() {
    // slide up
    $(".two").slideUp("slow");
});

.container {
    overflow:hidden;
    height: 60px;
}

.one {
    position: relative;
    top: 0;
    background-color: lightblue;
    z-index: 1;
}

.two {
    position: relative;
    background-color: yellow;
    z-index: -1;
    display:none;
}
/*
.one:hover + .two {
    top: 0px;
}*/

.red-cell {background: red!important;}
.close {background: red; display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
    <div class="one">click me to reveal new div</div>
    <div class="two">Search</div>
</div>

<div class="container">
    <div class="one">click me to reveal new div</div>
    <div class="two">Login
   <div class="close">Close</div>
  </div>
</div>

I think if you put the close part within the open part then it will work. It will only then bind the close action once the open part has been triggered. Note that `on()` is the more upto date function for triggers. Happy to create an answer if this works. — Antony, Jun 16 '17 at 07:49

mplungjan · Accepted Answer · 2017-06-16T08:03:15.637

Your z-index hides the div for events

I also changed the event handler from click to on("click"... because of the Difference between .on('click') vs .click()

$(".one").on("click",function(e) {
    e.preventDefault();
    e.stopPropagation();
    // do your worst, i.e. slide down
    $(".two").slideDown("slow");
});

$(".close").on("click",function() {
    // slide up
    $(".two").slideUp("slow");
});

.container {
    overflow:hidden;
    height: 60px;
}

.one {
    position: relative;
    top: 0;
    background-color: lightblue;
    z-index: 1;
}

.two {
    position: relative;
    background-color: yellow;
   /* z-index: -1; */
    display:none;
}
/*
.one:hover + .two {
    top: 0px;
}*/

.red-cell {background: red!important;}
.close {background: red; display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
    <div class="one">click me to reveal new div</div>
    <div class="two">Search</div>
</div>

<div class="container">
    <div class="one">click me to reveal new div</div>
    <div class="two">Login
   <div class="close">Close</div>
  </div>
</div>

C.Raf.T · Answer 2 · 2017-06-16T08:10:58.473

Since the .close block is inside the parent .container block, so that the for call event needs to be raised above the parent. For this you can use z-index :

$(".one").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    // do your worst, i.e. slide down
    $(".two").slideDown("slow");
});

$(".close").click(function(e) { 
   e.preventDefault();
    e.stopPropagation();
    // slide up
    $(".two").slideUp("slow");
});

.container {
    overflow:hidden;
    height: 60px;
    z-index:-1;
}

.one {
    position: relative;
    top: 0;
    background-color: lightblue;
}

.two {
    position: relative;
    background-color: yellow;
    display:none;
}
/*
.one:hover + .two {
    top: 0px;
}*/

.red-cell {background: red!important;}
.close {background: red; display:block;z-index:100;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
    <div class="one">click me to reveal new div</div>
    <div class="two">Search</div>
</div>

<div class="container">
    <div class="one">click me to reveal new div</div>
    <div class="two">Login
   <div class="close">Close</div>
  </div>
</div>

I suspect your answer is the same as mine but you did not tell us what you changed — mplungjan, Jun 16 '17 at 08:01

Close button on slide down div - jQuery

2 Answers2