JSFiddle - React, Tailwind, and code Playground

by Garfrey

HTML

<div id="wrap">
<a href="#" id="example-show" class="showLink" data-showhide="example">
<button class="btn-u btn-u-lg btn-block btn-u-dark-orange">
Read More
</button>
</a>
<div id="example" class="more">
<iframe width="600" height="315" src="//www.youtube.com/embed/BaPlMMlyM_0" frameborder="0" allowfullscreen></iframe>
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
</div>
</div>  

<script language="javascript" type="text/javascript">
function showHide() {
  var shID = $(this).data("showhide"); // Use lower case only in data
  if (document.getElementById(shID + '-show').style.display != 'none') {
    document.getElementById(shID + '-show').style.display = 'none';
    document.getElementById(shID).style.display = 'block';
  } else {
    document.getElementById(shID + '-show').style.display = 'inline';
    document.getElementById(shID).style.display = 'none';
  }
}

$(function() {
  $("#example-show").on("click", showHide);
});
</script>

CSS

.more {
      display: none;
      border-top: 1px solid #666;
      border-bottom: 1px solid #666; }
   a.showLink, a.hideLink {
      text-decoration: none;
      color: #36f;
      padding-left: 8px;
      background: transparent url(down.gif) no-repeat left; }
   a.hideLink {
      background: transparent url(up.gif) no-repeat left; }
   a.showLink:hover, a.hideLink:hover {
      border-bottom: 1px dotted #36f; }