JSFiddle - React, Tailwind, and code Playground

by Debiprasad

HTML

<div id="food-tracker-accordion" role="tablist" class="panel-group m-t-20">
  <div class="panel panel-default">
    <div role="tab" class="panel-heading">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-breakfast-form">Add Breakfast</a>
      </h4>
    </div>
    <div id="add-breakfast-form" role="tabpanel" class="panel-collapse collapse">
      <div class="panel-body">
        Add Breakfast form
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div role="tab" class="panel-heading">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-lunch-form">Add Lunch</a>
      </h4>
    </div>
    <div id="add-lunch-form" role="tabpanel" class="panel-collapse collapse">
      <div class="panel-body">
        Add Lunch form
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div role="tab" class="panel-heading">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-dinner-form">Add Dinner</a>
      </h4>
    </div>
    <div id="add-dinner-form" role="tabpanel" class="panel-collapse collapse">
      <div class="panel-body">
        Add Dinner form
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div role="tab" class="panel-heading">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-snacks-form">Add Snacks</a>
      </h4>
    </div>
    <div id="add-snacks-form" role="tabpanel" class="panel-collapse collapse">
      <div class="panel-body">
        Add Snacks form
      </div>
    </div>
  </div>
</div>
<div class="m-t-20">
  <button onclick="openBreakfast()">Open Breakfast</button>
  <button onclick="openLunch()">Open Lunch</button>
  <button onclick="openDinner()">Open Dinner</button>
  <button...

CSS

body {
  padding: 20px;
}

.m-t-20 {
  margin-top: 20px;
}

JavaScript

function openBreakfast() {
 $('#add-breakfast-form').collapse('show');
}

function openLunch() {
 $('#add-lunch-form').collapse('show');
}

function openDinner() {
 $('#add-dinner-form').collapse('show');
}

function openSnacks() {
 $('#add-snacks-form').collapse('show');
}