JSFiddle - React, Tailwind, and code Playground

by LuckyLuzz

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<table class="table">
  <tr>
    <td>
      Do something?
    </td>
    <td>
      <button class="btn btn-secondary" data-toggle="collapse" data-target="#pHCali">YES!</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <div id="pHCali" class="collapse col-sm text-center">
        <table class="table">
          <tr>
            <td>
              Hello
            </td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-secondary active" id="idsave" data-toggle="collapse">
         <input type="radio" name="options" id="option1" autocomplete="Save"checked>Save
          </label>
        <label class="btn btn-secondary">
       <input type="radio" name="options" id="option2" autocomplete="Cancel">Cancel
 </label>
      </div>
    </td>
  </tr>
 </table>

JavaScript

$(document).ready(function() {
    $("#idsave").on('click', function() {
        $(".collapse").collapse('hide');
    });
});