JSFiddle - React, Tailwind, and code Playground

by c_vilander

HTML

<div class="wrapper">

    <div id="dropdown">
      <p>Drop Down</p>
  </div>
  <div id="content">
    <ul id="text">
      <li><a href="#">Some text</a></li>
      <li><a href="#">Well, again</a></li>
      <li><a href="#">And again</a></li>
    </ul>
   </div>

</div>

CSS

body {
  font-family: Raleway, 'Helvetica Neue', Helvetica, sans-serif;

}
.wrapper {
  margin: 0 auto;
  width: 200px;
}

#dropdown {
  position: relative;
  top: 10px;
  left: 0;
  width: 150px;
  height: 35px;
  margin: 0;
  padding: 0px 5px 2px 5px;
  border-radius: 5px;
  background: #393939;
  cursor: pointer;
}

#dropdown p {
  text-align: center;
  font-size: 14px;
  font-weight: 100;
  letter-spacing: 2px;
  line-height: 38px;
  color: #fff;
}

#content {
  position: relative;
  top: 7px;
  left: 0;
  width: 150px;
  height: 0px;
  margin: 0;
  padding: 0px 5px 2px 5px;
  border-radius: 0px 0px 5px 5px;
  background: #393939;
  transition: 0.5s;
  cursor: pointer;  
}

#text {
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: 0.5s;
}

 ul {
  list-style: none;
}

 a {
  text-decoration: none;
  color: #fff;
  font-weight: 100;
}

JavaScript

var CV = document.getElementById('dropdown'); {

CV.onclick = function toggleDiv() {
    "use strict";
    var e = document.getElementById('text');
    var x = document.getElementById('content');
    if (x.style.height === "140px") {
        x.style.height = "0px";
        e.style.opacity = "0";

    } else {
        x.style.height = "140px";
        e.style.opacity = "1";
    }
};}