<!-- Original example is here: https://codepen.io/raubaca/pen/PZzpVe -->
<!-- Use this to convert the scss in the code pen above to raw css used below: https://jsonformatter.org/scss-to-css -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <!-- this is what prevents the text & images from shrinking in the mobile versions -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <link rel="stylesheet" type="text/css" href="./tailwind-css/styles.css">

    <style media="screen">
      body {
       color: #2c3e50;
       background: #ecf0f1;
       padding: 0 1em 1em;
      }
      h1 {
       margin: 0;
       line-height: 2;
       text-align: center;
      }
      h2 {
       margin: 0 0 0.5em;
       font-weight: normal;
      }
      input {
       position: absolute;
       opacity: 0;
       z-index: -1;
      }

      /* custom bit added by Burd */
      @media only screen and (min-width: 800px) {
        .row {
         display: flex;
        }

        .row .col {
          flex: 1;
        }
        .row .col:last-child {
         margin-left: 1em;
        }
      }
      /* Accordion styles */
      .tabs {
       border-radius: 8px;
       overflow: hidden;
       box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
      }
      .tab {
       width: 100%;
       color: white;
       overflow: hidden;
      }
      .tab-label {
       display: flex;
       justify-content: space-between;
       padding: 1em;
       background: #2c3e50;
       font-weight: bold;
       cursor: pointer;
      /* Icon */
      }
      .tab-label:hover {
       background: #1a252f;
      }
      .tab-label::after {
       content: "\276F";
       width: 1em;
       height: 1em;
       text-align: center;
       transition: all 0.35s;
      }
      .tab-content {
       max-height: 0;
       padding: 0 1em;
       color: #2c3e50;
       background: white;
       transition: all 0.35s;
      }
      .tab-close {
       display: flex;
       justify-content: flex-end;
       padding: 1em;
       font-size: 0.75em;
       background: #2c3e50;
       cursor: pointer;
      }
      .tab-close:hover {
       background: #1a252f;
      }
      input:checked + .tab-label {
       background: #1a252f;
      }
      input:checked + .tab-label::after {
       transform: rotate(90deg);
      }
      input:checked ~ .tab-content {
       max-height: 100vh;
       padding: 1em;
      }
    </style>

    <title>Pure Accordion</title>
  </head>
  <body>
    <h1 class="invisible sm:visible text-lg">Pure CSS Accordion <sup>2.0</sup> located here: <strong class="font-mono">'./views/partials/pureaccordion.ejs'</strong> in the project.&nbsp;  Original example is available online <a class="text-red-900" href="https://codepen.io/raubaca/pen/PZzpVe">here in codepen</a> online in Codepen.&nbsp; The scss was converted to css <a class="text-red-900" href="https://jsonformatter.org/scss-to-css">here</a>.</h1>
    <br>
    <div class="row">

      <!-- Open Multiple -->
      <div class="col mb-12">
        <h2>Open <b>multiple</b></h2>
        <div class="tabs">
          <div class="tab">
            <input type="checkbox" id="chck1">
            <label class="tab-label" for="chck1">Item 1</label>
            <div class="tab-content">
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
            </div>
          </div>
          <div class="tab">
            <input type="checkbox" id="chck2">
            <label class="tab-label" for="chck2">Item 2</label>
            <div class="tab-content">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. A, in!
            </div>
          </div>
        </div>
      </div>

      <!-- Open One -->
      <div class="col">
        <h2>Open <b>one</b></h2>
        <div class="tabs">
          <div class="tab">
            <input type="radio" id="rd1" name="rd">
            <label class="tab-label" for="rd1">Item 1</label>
            <div class="tab-content">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos, facilis.
            </div>
          </div>
          <div class="tab">
            <input type="radio" id="rd2" name="rd">
            <label class="tab-label" for="rd2">Item 2</label>
            <div class="tab-content">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil, aut.
            </div>
          </div>
          <div class="tab">
            <input type="radio" id="rd3" name="rd">
            <label for="rd3" class="tab-close">Close others &times;</label>
          </div>
        </div>
      </div>

    </div>
  </body>
</html>
