JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div class="container">
<div class="card">
  <div class="card-header">
    <div class="row">
      <div class="col-9">
        Card Title      
        <div id="headerContent" class="d-none">
          This is content I want to animate in from the top.        
        </div>
      </div>
      <div class="col-3">
        <i class="fa fa-folder-open-o fa-lg float-right" onclick="toggleHeaderContent()"></i>
      </div>
    </div>
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
</div>

JavaScript

var isContentOpen = false;
function toggleHeaderContent() {
  console.log('here 1');
  try {
    var content = document.getElementById('headerContent');
    if (isContentOpen) {
      content.classList.remove("d-none");
      content.classList.add("d-inline");    
    } else {
      content.classList.remove("d-inline");  
      content.classList.add("d-none");    
    }  
  } catch (ex) {
    console.log('here 2');
    console.log(ex);
  }
  isContentOpen = !isContentOpen;
}