JSFiddle - React, Tailwind, and code Playground

by magnix2k

HTML

<div class="wrapper">


<div class="back">BG
    <div class="expandBG">
      <div class="openit">OPEN</div>
      <div class="flex-col">
        <div class="closeit">CLOSE</div>

        <div class="content text" style="display: none;">
          <div>(CONTENT HERE)</div>
        </div>
      </div>
    </div>
</div>


</div>

CSS

body {
  background-color: #000;
}
.wrapper {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  border: solid red 1px;
}
.back {
  position: relative;
  color: #fff;
  width: 110px;
    height: 110px;
    background-color: red;
    margin: 0 auto;
    text-align: center;
    display: block;
}
.expandBG {
   display: block;
    width: 100px;
    height: 100px;
    transition: ease 0.3s;
    background-color: #192D38;
    overflow: hidden;
    margin: 0 auto;
    bottom: 0;
    text-align: center;
    font-family: sans-serif;
    color: #fff;
    position: relative;
}
.flex-col {
  flex-direction: column;
}
.openit {
  display: block;
  text-align: center;
  height: 100%;
  cursor: pointer;
   margin: 0 auto;
}
.closeit {
  display: block;
 text-align: center;
  cursor: pointer;
  width: 100%;
  margin: 0 auto;
  z-index: 1;
  position: relative;
}
.text {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -25px;
   }
.content {
   width: 100%;
   height: 50vw;
   position: relative;
   margin: 0 auto;
}

JavaScript

$(".openit").on("click", function() {
    $(".expandBG").toggleClass("content");
    $(".openit").hide();
    $(".closeit").show();
    $(".text").delay(500).fadeIn();
});
$(".closeit").on("click", function() {
    $(".expandBG").toggleClass("content");
    $(".openit").show();
    $(".closeit").hide();
    $(".text").hide();
});