JSFiddle - React, Tailwind, and code Playground

by Brett DeWoody

HTML

<li><a id="clickme" onclick="unhide('about');">click me</a></li>
<div id="about" class="hide">
<p>lorem ipsum …</p>
</div>

CSS

.hide { 
    -webkit-transition: opacity 3s;
    -moz-transition: opacity 3s;
    -o-transition: opacity 3s;
    transition: opacity 3s;
    opacity:0;  
}   
.unhide { 
    opacity:1;
}

JavaScript

function unhide(divID) {

  var element = document.getElementById(divID);
  if (element) {
    element.className=(element.className=='hide')?'hide unhide':'hide';
  }
}