JSFiddle - React, Tailwind, and code Playground

by SĂ©bastien Lorentz

HTML

<div id="content">
  <div id="types">
    <a href="#nav"><button>Click Here</button></a>
    <a href="#nav2"><button>Click Here</button></a>
  </div>
  <div id="values">
    <div class="expandable" id="nav">
      <p>Cum enim magna parturient</p>
    </div>
    <div class="expandable" id="nav2">
      <p>Cum enim magna parturient</p>
    </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
}

#content {
  margin: 50px;
}

a {
  text-decoration: none;
}

.expandable {
  background: #fff;
  overflow: hidden;
  color: #000;
  line-height: 50px;
  transition: all .5s ease-in-out;
  height: 0;
}

.expandable:target {
  height: 50px;
}