JSFiddle - React, Tailwind, and code Playground
HTML
<div class="accordion">
<div class="something"> <a class="">Accordion Pane 1</a>
</div>
<div class="accordion-body collapse">
<div class="accordion-inner">content content content content content content content content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content
<br/>content</div>
</div>
</div>
CSS
.collapse {
max-height:0px;
position: relative;
overflow: hidden;
-webkit-transition: max-height 0.35s ease-in-out;
-moz-transition: max-height 0.35s ease-in-out;
-o-transition: max-height 0.35s ease-in-out;
transition: max-height 0.35s ease-in-out;
background-color: #cecece;
}
.collapse.in {
max-height:1000px;
}
JavaScript
$('.something').click(function (event) {
event.preventDefault();
$(this).next('.accordion-body').toggleClass('in');
})