JSFiddle - React, Tailwind, and code Playground

by alvaroveliz

HTML

<a href="javascript:void(0);" id="toggle">Toggle</a>
<div class="box-small" id="box">
  <div class="item">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="item">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="item">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="item">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="item">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="item">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="item">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="item">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="item">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="item">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="item">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="item">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="item">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="item">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="item">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="item">
    <img src="http://placehold.it/200x200">
  </div>
  <div class="item">
    <img src="http://placehold.it/200x200">
  </div>
  
</div>

CSS

#box {
  -moz-transition: all 0.3 ease-in;
  transition: all 0.3 ease-in;
  max-height: 410px;
}
.box-small {
  max-height: auto;
  overflow: hidden;
  -moz-transition: all 0.3 ease-in;
  transition: all 0.3 ease-in;
}
.item {
  float: left;
}

JavaScript

$('#toggle').on('click', function(){
 	$('#box').toggleClass('box-small');
});