JSFiddle - React, Tailwind, and code Playground

by Dejan Munjiza

HTML

<div class="box">
  <a href="javascript:openFirst()" class="openFirst"></a>
  <div class="first">
    Lorem ipsum dolor sit amet
    <a href="javascript:openFirst()" class="closeFirst"></a>
  </div>
</div>

<script>
function openFirst(){
	if($('.first').is(':visible')) {
  	$('.first').slideUp();
    $('.openFirst').show().delay('60500');
  }
  else {
  	$('.first').slideDown();
    $('.openFirst').hide();
  }
}
</script>

CSS

.box {
  width: 100px;
  background: gray;
  margin-right: 1px;
  float: left;
}
.first, .second, .third {display: none; clear: both;}
.openFirst, .openSecond, .openThird {
  background: lightblue;
  width: 100px;
  position: relative;
  float: left;
}
.openFirst {
  width: 20px;
  height: 20px;
  background: url('http://2r3fd65rdnr4efnwp2y2f1xt.wpengine.netdna-cdn.com/wp-content/uploads/arrow-down-gray-hi.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-color: black;
}
.closeFirst {
  width: 20px;
  height: 20px;
  background: url('http://www.clker.com/cliparts/R/a/s/l/x/V/arrow-up-gray-hi.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-color: black;
  float: left;
}
.active {
  background: green;
}