JSFiddle - React, Tailwind, and code Playground

by Gayan Dasanayake

HTML

<div class="section">
  <div class="section-title">
    Section 1
  </div>
  <div class="section-content">
    Section 1 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
  </div>
</div>

<div class="section">
  <div class="section-title">
    Section 2
  </div>
  <div class="section-content">
    Section 2 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
  </div>
</div>

CSS

.section {
  background-color: white;
  margin: 5px;
}

.section-title {
  background-color: lightgray;
  cursor: pointer;
}

JavaScript

$( ".section-title" ).click(function() {
		$(this).parent().find( ".section-content" ).slideToggle();
});