JSFiddle - React, Tailwind, and code Playground
HTML
<div id="toggle">
<div class="open">
<img src="http://www.abload.de/img/plus6jcm3.png" alt="">
<a href="#">Open Spoiler</a>
</div>
<div class="close" style="display:none;">
<img src="http://www.abload.de/img/minuswfdlk.png" alt="">
<a href="#">Close Spoiler</a>
</div>
</div>
<div id="panel" style="display:none;">
<div id="content">
<br /><center> Spoiler content</center>
<br /><br />
</div>
</div>
CSS
#panel {
width: 80%;
background: #d9d9d9;
font-family: litios;
font-size: 15px;
border-bottom: 1px solid #bdbdbd;
border-left: 1px solid #bdbdbd;
border-right: 1px solid #bdbdbd;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.open, .close {
background: #d9d9d9;
border: 1px solid #bdbdbd;
height: 30px;
width: 80%;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.open {
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#toggle {
position: relative;
height: 32px;
line-height: 30px;
}
#toggle img {
position: absolute;
top: 2px;
left: 10px;
cursor: pointer;
}
#toggle a {
font-size: 16px;
color: #000;
text-decoration: none;
display: block;
padding-left: 45px;
}
JavaScript
// Expand Panel
$(".open").click(function(){
$("div#panel").slideDown("fast");
$("#panel").animate({"height": "+=10px"}, "fast");
$("#panel").animate({"height": "-=10px"}, "fast");
$("#content").fadeIn("slow");
$(".open").hide();
$(".close").show();
});
// Collapse Panel
$(".close").click(function(){
$("#content").fadeOut("slow");
$("#panel").animate({"height": "+=10px"}, "fast");
$("div#panel").slideUp("fast");
$(".open").show();
$(".close").hide();
});