JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>


<div class="container-fluid">
  <div class="row">
    <div class="collapse-content">
      <div class="col-md-4"></div>
      <div class="col-md-4"></div>
      <div class="col-md-4"></div>
      <div class="col-md-4"></div>
      <div class="col-md-4"></div>
      <div class="col-md-4"></div>
      <div class="col-md-4"></div>
      <div class="col-md-4"></div>
      <div class="col-md-4"></div>
    </div>
    <button class="showBtn">Show more</button>
  </div>
</div>

CSS

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

html,
body {
  padding: 0px;
  margin: 0px;
}

.container-fuid {
  min-width: 100%;
}

.col-md-4 {
  width: 100%;
  height: 250px;
  background-color: gray;
  border: 1px solid black;
  -webkit-transition: 0.75s linear;
  -moz-transition: 0.75s linear;
  -ms-transition: 0.75s linear;
  -o-transition: 0.75s linear;
  transition: 0.75s linear;
}

.collapse-content {
  overflow: hidden;
  height: 0px;
  -webkit-transition: 0.75s linear;
  -moz-transition: 0.75s linear;
  -ms-transition: 0.75s linear;
  -o-transition: 0.75s linear;
  transition: 0.75s linear;
}

.active-collapse {
  height: 1000px;
  -webkit-transition: 0.75s linear;
  -moz-transition: 0.75s linear;
  -ms-transition: 0.75s linear;
  -o-transition: 0.75s linear;
  transition: 0.75s linear;
}

.showBtn {
  width: 100%;
  height: 55px;
  font-size: 19px;
  background-color: deepskyblue;
  border: none;
}

JavaScript

$(document).ready(function() {
  $('.showBtn').click(function() {
    $('.collapse-content').toggleClass('active-collapse');
  });
});