JSFiddle - React, Tailwind, and code Playground

by Aditya Sharma

HTML

<div class="panel">
  <div class="content_01a">Here goes content1a</div>
  <div class="content_01b">Here goes content1b</div>
</div>

<div class="panel">
  <div class="content_02a">Here goes content2a</div>
  <div class="content_02b">Here goes content2b</div>
  <div class="content_02c">Here goes content2c</div>
</div>

<div class="panel">
  <div class="content_03a">Here goes content2a</div>
  <div class="content_03b">Here goes content2b</div>
</div>


<div class="buttons">
  <div class="panel_button"> Button_01 </div>
  <div class="panel_button"> Button_02 </div>
  <div class="panel_button"> Button_03 </div>
</div>

CSS

.buttons {
  background-color: green;
  float: left;
  width: 100%;
}

.panel_button {
  float: left;
  width: 30%;
}

.panel {
  background-color: blue;
  float: left;
  width: 100%;
  display: none;
}

JavaScript

$(document).ready(function () {
    $(".panel_button").on('click', function () {
        $(this).next('.panel').slideToggle(0);
        $(this).toggleClass('active');
        console.log("index", jQuery(this).index());
    });
});