JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
<a href="#" id="example-show" class="showLink" onclick="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(shID) {
   if (document.getElementById(shID)) {
      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';
      }
   }
}
</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; }