How to fix a double click on a jQuery slide up/down animation?

Question

I have this animation that on click of a button makes a div slide up and then down again. It works just the way I want however the first time you click it, it doesn't work you have to click twice to get it to respond.

Somebody suggested using…

event.preventDefault() and event.stopPropagation()

...however as Im not that great with js could someone advise where I would need to implement this in my existing code to solve the problem.

See the following fiddle… Notice how you have to tap/click twice to trigger it I only want to have to click once.

http://jsfiddle.net/8ZFMJ/46/

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"});
}
});

Answer 1

Just change the initial value of clicked

var clicked = false;
$(".crossRotate").on('click', function () {
    if (clicked) {
        clicked = false;
        $(".content-wrapper").css({
            "bottom": "-90px"
        });
    } else {
        clicked = true;
        $(".content-wrapper").css({
            "bottom": "0"
        });
    }
});

Demo: Fiddle

You have started with the value -90 for bottom via css and clicked is set to true, so when the first click happens the if block is executed instead of else block

---

You can probably reduce it to

var $wrapper = $(".content-wrapper");
$(".crossRotate").on('click', function () {
    $wrapper.css('bottom', function (i, bottom) {
        return parseInt(bottom) ? 0 : -90;
    });
});

Demo: Fiddle

Answer 2

Looks better if more than one element with specific class is used:

DEMO jsFiddle

$(".crossRotate").on('click', function () {
    $(".content-wrapper").css({
        "bottom": !$(this).data('clicked') ? 0 : "-90px"
    });
    $(this).data('clicked', !$(this).data('clicked'));
});

Or even better:

DEMO jsFiddle

$(".crossRotate").on('click', function () {
    $(this).closest('.content-wrapper').toggleClass('clicked');
});

CSS:

.content-wrapper.clicked {
    bottom: 0;
}