JSFiddle - React, Tailwind, and code Playground

by Ryan Mitchell

HTML

<div class="button_top"></div>
<div class="button_bottom"></div>

CSS

body {
margin:200px 200px 200px 200px;
}



.button_top {
    border-radius: 20px 20px 0px 0px; 
	background:#5fa0af; 
	height:50px;
	width:150px;
}

.button_bottom {
    border-radius: 0px 0px 20px 20px; 
	background:#5fa0af; 
	height:50px;
	width:150px;
}

JavaScript

var opened = false;

$('.button_top, .button_bottom').click(function() {
    if (opened == false) {
	$('.button_bottom').animate({marginTop: "+100px"}, {duration: 500, queue: false});
	$('.button_top').animate({marginTop: "-50px"}, {
	duration: 500, 
	queue: false,
	complete: function() {
opened = true;
	}
	});
    } else if(opened == true){
	$('.button_bottom').animate({marginTop: "0px"}, {duration: 500, queue: false});
	$('.button_top').animate({marginTop: "0px"}, {
	duration: 500, 
	queue: false,
	complete: function() {
opened = false;
	}
});
}
});