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="is-hidden">
          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>

CSS

#headerContent {
  display: inline;  
}

.is-hidden {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-100px);
}

.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s ease-out;
}

JavaScript

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