JSFiddle - React, Tailwind, and code Playground

by malamine_kebe

HTML

<br><br>
<div class="frame">
	<div class="contentTop"></div>
	bla bla bla bla bla<br>bla bla bla bla bla<br>bla bla bla bla bla<br>bla bla bla bla bla
	<div class="contentBottom"></div>
</div>
<br><br>
<div class="frame">
	<div class="contentTop"></div>
	bla bla bla bla bla<br>bla bla bla bla bla<br>bla bla bla bla bla<br>bla bla bla bla bla
	<div class="contentBottom"></div>
</div>

CSS

.frame{
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #FFFFFF;
	-webkit-box-shadow: 1px 2px 2px #91999d;
	-moz-box-shadow: 1px 2px 2px #91999d;
	box-shadow: 1px 2px 2px #91999d;
	position:relative;
	width:40%;
}


.contentTop { 
	position:absolute;
	display:none;
	background-color: #FFFFFF;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.contentBottom { 
	position:absolute;
	background-color: #FFFFFF;
	-webkit-box-shadow: 1px 2px 2px #91999d;
	-moz-box-shadow: 1px 2px 2px #91999d;
	box-shadow: 1px 2px 2px #91999d;
	-webkit-border-bottom-left-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-bottomleft: 3px;
	-moz-border-radius-bottomright: 3px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	display: none;
}

body{
	background-color:#e1e3e8;
}

JavaScript

$(document).on('mouseenter', '.frame', function() {
	var el = $(this);
	var hauteur = el.height();
	var largeur = el.width();
	contentBottom = el.children(".contentBottom");
	contentTop = el.children(".contentTop");
	contentTop.css({"bottom":hauteur,"width":largeur});	
	contentTop.html('top top top top');
	contentBottom.html('bottom bottom bottom bottom<br>bottom bottom bottom bottom<br>bottom bottom bottom bottom<br>bottom bottom bottom bottom<br>');
	contentBottom.css({"top":hauteur,"width":largeur});
		el.css({
		"border-radius":"0px",
		"-moz-border-radius":"0px",
		"-webkit-border-radius":"0px"
	});
	contentBottom.stop(true, true).slideToggle(300);
	contentTop.stop(true, true).slideToggle(300);	
}).on('mouseleave','.frame', function() {
	var el = $(this);
	contentBottom = el.children(".contentBottom");
	contentTop = el.children(".contentTop");
	contentTop.stop(true, true).slideToggle(300, function(){
		contentTop.html('');
		el.css({
			"border-top-left-radius":"3px",
			"border-top-right-radius":"3px",
			"-moz-border-radius-topleft":"3px",
			"-moz-border-radius-topright":"3px",
			"-webkit-border-top-left-radius":"3px",
			"-webkit-border-top-right-radius":"3px"
		});
	});
	contentBottom.stop(true, true).slideToggle(300, function(){
		contentBottom.html('');
		el.css({
			"border-bottom-left-radius":"3px",
			"border-bottom-right-radius":"3px",
			"-moz-border-radius-bottomleft":"3px",
			"-moz-border-radius-bottomright":"3px",
			"-webkit-border-bottom-left-radius":"3px",
			"-webkit-border-bottom-right-radius":"3px"
		});
	});
});