JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<form id="acf-img-set-post-thumb-form">
  <table id="form-id" class="form-table" role="presentation">
    <tbody>
      <tr onclick="row_expand_collapse(this)">
        <th scope="row">
          <label for="post_type">Post Type</label>
        </th>
        <td>
          <select name="post_type" required="">
            <option value="" selected="selected" disabled="">Select Post Type...</option>
            <option value="post">Posts</option>
            <option value="page">Pages</option>
            <option value="product">Products</option>
          </select>
        </td>
      </tr>
      <tr class="progress-row row-collapse">
        <th scope="row">
          <div class="row-flex-collapse">
            <label for="progress">Progress</label>
          </div>
        </th>
        <td>
          <div class="row-flex-collapse">
            <div class="progress-wrap running">
              <div class="progress">
                <div class="progress-bar"></div>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr onclick="row_expand_collapse(this)">
        <th scope="row">
          <label for="acf_image_field">ACF Image Field</label>
        </th>
        <td>
          <select name="acf_image_field" required="">
            <option value="" selected="selected" disabled="">Select ACF Image Field...</option>
            <option value="paint_color">paint_color</option>
            <option value="paint_brush">paint_brush</option>
            <option value="acf_featured_img">acf_featured_img</option>
          </select>
        </td>
      </tr>
      <tr class="logger-row row-collapse">
        <th scope="row">
          <div class="row-flex-collapse">
            <label for="logger">Logs</label>
          </div>
        </th>
        <td>
          <div class="row-flex-collapse">
            <pre class="logger"></pre>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</form>

SCSS

// plugin css
#acf-img-set-post-thumb-form {
  
  .form-table {
    
    TR {
      line-hei
    }
  }
  
  label {
    vertical-align: middle;
  }
  
  .row-flex-collapse {
    display: flex;
    width: 100%;
    flex-grow: 1;
    
    > * {
      width: 100%;
    }
  }

  .row-collapse {
    
    .row-flex-collapse {
      height: 0px;
    }

    td,
    th {
      padding: 0px 0px;
      line-height: 0px;
      white-space: nowrap;
      overflow: hidden;
    }
  }

  .row-expand {
    
    .row-flex-collapse {
      height: auto;
    }

    td,
    th {
      line-height: 100%;
    }
  }

  .progress-wrap {
    overflow: hidden;
    height: calc(1rem + 2px);
    //transition: height .6s ease;

    &.running {
      //height: calc(1rem + 2px);
    }
  }

  .progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    line-height: 0;
    font-size: .75rem;
    background-color: #f6f7f7;
    border-radius: 3px;
    border-color: #2271b1;
    border-width: 1px;
    border-style: solid;

    .progress-bar {
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      color: #fff;
      text-align: center;
      white-space: nowrap;
      background-color: #2271b1;
      transition: width .6s ease;
    }
  }

  .logger {
    margin-top: 0;
    overflow: scroll;
    height: 200px;
    box-shadow: 0 0 0 transparent;
    border-radius: 4px;
    border: 1px solid #8c8f94;
    background-color: #fff;
    color: #2c3338;
    padding: 4px 6px 1px;
    line-height: 1.42857143;
    resize: vertical;
    font-family: Consolas,Monaco,monospace;
    direction: ltr;
    unicode-bidi: embed;
    font-size: 14px;
    box-sizing: border-box;
    font-weight: inherit;

    A {
      &.log-link-success {
        color: #2271b1;
      }
      &.log-link-error {
        color: #b32d2e;
      }
    }
  }
}

JavaScript

function row_expand_collapse(e){

  //get table id so you know what table to manipulate row from
  const tableID = e.parentNode.parentNode.id;

  //get row index and increment by 1 so you know what row to expand/collapse
  const i = e.rowIndex + 1;

  //get the row to change the css class on
  let row = document.getElementById(tableID).rows[i]

  // Add and remove the appropriate  css classname to expand/collapse the row

  if (row.classList.contains('row-collapse')){
    row.classList.remove('row-collapse')
    row.classList.add('row-expand')
    return
  }
  if (row.classList.contains('row-expand')){
    row.classList.remove('row-expand')
    row.classList.add('row-collapse')
    return
  }
}