When I click a button, there is an animation that makes a div slide up and then down again. It functions the way I want it to, but the first time you click it, it doesn't work; you have to click twice for it to respond.
Someone recommended using...
event.preventDefault() and event.stopPropagation()
...however, since I'm not very proficient in JavaScript, could someone guide me on where to incorporate this in my current code to solve the issue?
Check out the following demonstration and notice how you need to tap/click twice to trigger it when I only want to click once:
HTML
<div class="wrapper">
<div class="content-wrapper">
<div class="padLeft">
<h2>Project Title</h2>
<div class="crossRotate"> Open </div>
</div>
<div class="padLeft">
<p>Paragraph Goes Here</p>
<h3>Play Video</h3>
</div>
</div>
</div>
CSS
.wrapper {
width: 100%;
height: 200px;
position: absolute;
overflow: hidden;
margin: 0;
padding:0;
z-index: 1;
}
.content-wrapper {
position: absolute;
z-index: 999;
background: red;
bottom: -90px;
width: 100%;
-webkit-transition: bottom 1s;
-moz-transition: bottom 1s;
transition: bottom 1s;
}
.crossRotate {
position: absolute;
background-color: blue;
z-index: 1;
cursor: pointer;
}
JS
var clicked=true, animation=false;
$(".crossRotate").on('click', function(){
if(clicked)
{
clicked=false;
$(".content-wrapper").css({"bottom": "-90px"});
}
else
{
clicked=true;
$(".content-wrapper").css({"bottom": "0"});
}
});