JSFiddle - React, Tailwind, and code Playground

by BaronGrivet

HTML

<div id="accordion" class="accordion">
<div class="accordion-header">
Click Here to Expand
</div>
<div class="accordion-content">
  <img src="https://picsum.photos/300/300"/>
  <img src="https://picsum.photos/300/300"/>
  <img src="https://picsum.photos/300/300"/>
  <img src="https://picsum.photos/300/300"/>
  <img src="https://picsum.photos/300/300"/>
  <img src="https://picsum.photos/300/300"/>
  <img src="https://picsum.photos/300/300"/>
  <img src="https://picsum.photos/300/300"/>
</div>
</div>

SCSS

#accordion {
  .accordion-header {
    padding: 20px;
    text-align: center;
    cursor: pointer;
  }

  .accordion-content {
    height: 0px;
    transition: 10s;
    overflow: hidden;
  }
  &.open {
   .accordion-content {
      height: 900px;    
    } 
  }
}

JavaScript

$(document).ready(function(){
	$('#accordion').click(function(){
  	$(this).toggleClass('open');
  });
});