JSFiddle - React, Tailwind, and code Playground

by OjisanSeiuchi

HTML

<script>
  function prepButton() {
    const revealButton = document.getElementById('reveal');
    revealButton.style.width = "10%";
    revealButton.style.float
    revealButton.onclick = function() {
      updateReveal(revealButton);
    };

    function updateReveal(r) {
      //alert('hu');
      const idv = document.getElementById('ID-V');
      if (idv.ownerDocument.defaultView.getComputedStyle(idv, null).display === 'none') {
        idv.style.display = 'block';
        r.style.width = "100%";
      } else {
        idv.style.display = 'none';
        r.style.width = "10%";
      }
    }
  }
  if (document.readyState !== 'loading') {
    prepButton();
  } else {
    document.addEventListener('DOMContentLoaded', prepButton);
  }

</script>

<html class="card">
  <button class="button" id="reveal" type="button">
    <div class="button">⚖️ </div>
    <div class="spoiler" id="ID-V">
      <div class="idv-content">asdfdfd asdfdfd asdfdfd asdfdfd asdfdfd asdfdfd</div>
    </div>
  </button>

</html>

CSS

.card {
  font-family: "Helvetica", sans-serif;
  line-height: 36px;
  font-weight: light;
  font-size: 24px;
  text-align: justify;
  color: black;
  margin: 20px 2px 20px 2px;
  background: rgb(255, 255, 255);
}


div.button { font-size: 18px; }

div.spoiler { display: none; }

div.idv-content {
    line-height: 22px;
    text-align: justify;
    font-size: 18px;
}