Expand divs

https://stackoverflow.com/q/71447563/863110

by moshfeu

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>checkbox expand div</title>
    <meta charset="UTF-8" />

  </head>

  <body>
    <main>
      <h1>Expand divs</h1>
      <div class="case">
        <label for="project-input1">
          <h2>Click here to expand/shrink this div</h2></label
        >

        <input id="project-input1" type="checkbox" class="project-input" title="Expand / Shrink" />

        <div class="projectcontent">
          <p>Lorem ipsum<br />dolor sit amet.</p>
          <p>consectetur<br />adipiscing elit.</p>
          <p>sed do eiusmod<br />tempor incididunt.</p>
          <p>ut labore et<br />dolore magna aliqua.</p>
        </div>
      </div>
      <div class="case">
        <label for="project-input2">
          <h2>Click here to expand/shrink this div</h2></label
        >

        <input id="project-input2" type="checkbox" class="project-input" title="Expand / Shrink" />

        <div class="projectcontent">
          <p>Lorem ipsum<br />dolor sit amet.</p>
          <p>consectetur<br />adipiscing elit.</p>
          <p>sed do eiusmod<br />tempor incididunt.</p>
          <p>ut labore et<br />dolore magna aliqua.</p>
        </div>
      </div>
    </main>
  </body>
</html>

CSS

.case {
        position: relative;
        margin-bottom: 1em;
      }
      .case label {
        display: inline-block;
        background-color: coral;
        box-sizing: border-box;
        width: 100%;
        transition: box-shadow 0.15s ease;
        cursor: pointer;
      }
      
      .case label:hover {
        box-shadow: inset 0 0 0 100px #00000030;  
      }
      
      .case input {
        position: absolute;
        clip: rect(0, 0, 0, 0);
/*         text-align: center;
        height: 55px;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer; */
      }
      .project-input {
        width: 100%;
        height: 20px;
        display: block;
      }
      .projectcontent {
        max-height: 50px;
        transition: max-height 0.15s ease-out;
        overflow: hidden;
        background-color: #888;
      }
      .case .project-input:checked + .projectcontent {
        max-height: 2000px;
        overflow: visible;
        transition: max-height 0.3s ease-out;
      }