css read-more

by Michal L

HTML

<article>
  <h4>Lorem ipsum</h4>
  <input type="checkbox" class="read-more-state" id="post-1" />
  <div class="read-more-wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim doloremque voluptate maiores fugiat nam ab dolorum magni eos libero laudantium, eum cupiditate atque repellendus debitis quisquam blanditiis, quis modi aliquid?</p>
    <span class="read-more-target" id="post-1">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis architecto quia modi. Optio ducimus amet aliquam, recusandae ad, cupiditate harum minima sint repellat tenetur dolores, soluta quidem est veniam reprehenderit?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id iusto ratione error blanditiis non, commodi sequi. Quas, id. Atque harum hic quia totam qui laborum. Molestias laborum, tempora ratione aperiam.</p>
    </span>
  </div>
  <label for="post-1" class="read-more-trigger"></label>
</article>

<hr>

<table>
  <tr>
    <td>
      <input type="checkbox" class="read-more-state" id="post-2" />
      <span class="read-more-wrap">
        Lorem ipsum dolor sit amet.
        <span class="read-more-target" id="post-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium, aperiam aut eaque eos esse fugit id, illo impedit ipsa iure mollitia natus.</span>
      </span>
    </td>
    <td>100 pts</td>
    <td>
      <label for="post-2" class="read-more-trigger"></label>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="read-more-state" id="post-3" />
      <span class="read-more-wrap">
        Lorem ipsum dolor sit amet.
        <span class="read-more-target" id="post-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium, aperiam aut eaque eos esse fugit id, illo impedit ipsa iure mollitia natus.</span>
      </span>
    </td>
    <td>100 pts</td>
    <td>
      <label for="post-3" class="read-more-trigger"></label>
    </td>
  </tr>
  <tr>
    <td>
      <input...

CSS

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  display: none;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  display: block;
}

.read-more-state:checked ~ .read-more-trigger:before {
  transform: rotate(180deg);
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
}

td {
  border:1px solid black;
  width: 10rem;
  vertical-align:top;
}

.read-more-trigger:before {
  width: 0;
  height: 0;
  border-top: .6rem solid red;
  border-right: .6rem solid transparent;
  border-left: .6rem solid transparent;
  display: inline-block;
  content: '';
}