JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<div id="clientsDropDown">
    <p id="clientsOpen">test</p>

  <div id="clientsDashboard">
    <p id="clientsCTA">test
    </p>
  </div>
  <!-- /clientsDashboard -->
</div>
<!-- //clientsDropDown -->

CSS

#clientsDropDown {
  position:absolute;
  bottom:0;
  width: 100%;
  padding-bottom:2%;
  z-index: 100;
}
#clientsOpen {
  background: url("images/open.png") no-repeat scroll 68px 10px #414142;
  color: #ececec;
  cursor: pointer;
  font-size: 26px;
  margin: 45px 0 0 70%;
  padding: 0 15px 2px;
  text-decoration: none;
  width: 40px;
  heigth:20px;  
  display: block;  
}
#clientsCTA {
  background:#414142;
  width:100%;
  color: #CCCCCC;
  text-align:center;
  font-size: 6px;
  margin: 0;
  padding: 10px 0;
  text-decoration: none;
}
#clientsDropDown .clientsClose {
  background-image: url(images/close.png);
}
#clientsDropDown #clientsDashboard {
  display: none;
}

JavaScript

$('#clientsOpen').click(function () {
    $('#clientsDropDown #clientsDashboard').slideToggle({
      direction: "up"
    }, 300);
    $(this).toggleClass('clientsClose');
  }); // end click