JSFiddle - React, Tailwind, and code Playground

HR Table Row Toggle Front/Back

by skibulk

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
  document.write("<style>.back{ display: none; }</style>");

</script>
<noscript>
  <style>
    td>.back {
      margin-top: 20px;
      border-top: 1px solid lightgray;
      padding-top: 20px;
    }

  </style>
</noscript>

<table>
  <tr>
    <td>
      <label class="flipimage">
        <input type="checkbox" />
        <div class="front">
          <img src="http://via.placeholder.com/200x300/a73419" />
          <div class="btn">Show Back</div>
        </div>
        <div class="back">
          <img src="http://via.placeholder.com/200x300/fe4509" />
          <div class="btn">Show Front</div>
        </div>
      </label>
    </td>
    <td>
      <div class="front">
        Legionnaire
      </div>
      <div class="back">
        Zombie
      </div>
    </td>
    <td>
      <div class="front">
        Imperial
      </div>
      <div class="back">
        Necros
      </div>
    </td>
    <td>NA</td>
    <td>
      <div class="front">
        Champion • Token • Human Warrior
      </div>
      <div class="back">
        Champion • Token • Zombie
      </div>
    </td>
    <td>
      <div class="front">
        [expend] [col] [combat1] [row] If this token would leave play, put it back in the token pile. (It can never go into your discard pile, hand, or deck.)
      </div>
      <div class="back">
        [expend] [col] [combat2] [row] If this token would leave play, put it back in the token pile. (It can never go into your discard pile, hand, or deck.)
      </div>
    </td>
    <td>
      <div class="front">
        Guard 2
      </div>
      <div class="back">
        1
      </div>
    </td>
  </tr>
</table>

CSS

td:not(:first-child) {
  border-left: 1px solid lightgray;
  padding: 10px;
}

.flipimage {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flipimage input {
  display: none;
}


/* required for noscript */

.flipimage input:not(:checked) ~ .back {
  display: none;
}

.flipimage input:checked ~ .front {
  display: none;
}

.flipimage .btn {
  width: 100px;
  margin: 0 auto;
  padding: 6px;
  font-family: arial;
  font-size: 14px;
  text-align: center;
  color: #999;
  border: 2px solid #BBB;
  background: #DDD;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

JavaScript

console.clear();

$(".flipimage").click(function(event) {

  var tr = $(event.target).parents("tr").first();

  if (tr.length) {

    if (event.target.checked) {

      tr.find('.front').hide();
      tr.find('.back').show();

    } else {

      tr.find('.back').hide();
      tr.find('.front').show();
    }
  }
});