JSFiddle - React, Tailwind, and code Playground

by MarkSchultheiss

HTML

<table>
  <tbody>
    <tr>
      <td class="togglehidden_all">+/-</td>
    </tr>
    <tr>
      <td class="togglehidden_1 show  toggle-hide">1</td>
    </tr>
    <tr>
      <td class="hidden_1 hideme">2</td>
    </tr>
    <tr>
      <td class="togglehidden_2  toggle-hide">3</td>
    </tr>
    <tr>
      <td class="hidden_2 hideme">4</td>
    </tr>
    <tr>
      <td class="togglehidden_3 show toggle-hide">5</td>
    </tr>
    <tr>
      <td class="hidden_3 hideme">6</td>
    </tr>
    <tr>
      <td class="hidden_all">hidden_all click function Test</td>
    </tr>
  </tbody>
</table>

CSS

.show {
  color: white;
  background-color: green;
}

.hide {
  color: white;
  background-color: red;
}

JavaScript

$(document).ready(function() {
  // simple extenders to use
  jQuery.fn.areAll = function(arg) {
    return this.filter(arg).length === this.length;
  };
  jQuery.fn.slideToggleBool = function(bool, options) {
    return (bool ? $(this).slideDown(options) : $(this).slideUp(options));
  };
  // cache these for use
  var allthem = $('.hideme');
  var allToggles = $('.toggle-hide');
  // set initial state of toggles and associated element, respects classes present
  allToggles.each(function() {
    var isShow = $(this).hasClass("show");
    if (isShow) {
      $(this).parents('tr').next().find('td.hideme').hide();
    } else {
      $(this).toggleClass("hide", !isShow);
    }
  });
  // used to set the "all" +/- button state
  function hidden_all() {
    var areVis = allthem.areAll(':visible');
    var allHidden = allToggles.filter(":hidden").length == allToggles.length;
    $(".togglehidden_all")
      .toggleClass("show", !allHidden)
      .toggleClass("hide", areVis && !allHidden);
    return !areVis;
  }

  // set initial "+/-" button color
  hidden_all();

  $(".togglehidden_all").on('click', function() {
    var vis = hidden_all();
    $(this).toggleClass("show", !vis).toggleClass("hide", vis);
    allthem.slideToggleBool(vis, "slow");
    allToggles
      .toggleClass("show", !vis)
      .toggleClass("hide", vis);
  });
  $(".toggle-hide").on('click', function() {
    var myTarget = $(this).parents('tr').next().find('td.hideme');
    var isVis = myTarget.is(":visible");
    myTarget.slideToggleBool(!isVis, "slow");
    $(this).toggleClass("show", isVis).toggleClass("hide", !isVis);
  });
});