JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<h1>Аккордеон на чистом HTML/CSS</h1>

<h2>Открывать по-одному</h2>
<div class="accordion">
  <div class="item">
    <input type="radio" id="item1" name="item">
    <label class="headline" for="item1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</label>
    <div class="content">
      <p>Plura mihi bona sunt, inclinet, amari petere vellent.</p>
      <p>Fabio vel iudice vincam, sunt in culpa qui officia.</p>
      <p>Curabitur est gravida et libero vitae dictum. Contra legem facit qui id facit quod lex prohibet.</p>
    </div>
  </div>
  
  <div class="item">
    <input type="radio" id="item2" name="item">
    <label class="headline" for="item2">Sed haec quis possit intrepidus aestimare tellus.</label>
    <div class="content">
      <p>Plura mihi bona sunt, inclinet, amari petere vellent.</p>
      <p>Fabio vel iudice vincam, sunt in culpa qui officia.</p>
      <p>Curabitur est gravida et libero vitae dictum. Contra legem facit qui id facit quod lex prohibet.</p>
    </div>
  </div>
  
  <div class="item">
    <input type="radio" id="item3" name="item">
    <label class="headline" for="item3">Fabio vel iudice vincam, sunt in culpa qui officia.</label>
    <div class="content">
      <p>Plura mihi bona sunt, inclinet, amari petere vellent.</p>
      <p>Fabio vel iudice vincam, sunt in culpa qui officia.</p>
      <p>Curabitur est gravida et libero vitae dictum. Contra legem facit qui id facit quod lex prohibet.</p>
    </div>
  </div>

</div>

<h2>Открывать по-много</h2>
<div class="accordion">
  <div class="item">
    <input type="checkbox" id="item11">
    <label class="headline" for="item11">Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</label>
    <div class="content">
      <p>Plura mihi bona sunt, inclinet, amari petere vellent.</p>
      <p>Fabio vel iudice vincam, sunt in culpa qui officia.</p>
      <p>Curabitur est gravida et libero vitae dictum. Contra legem facit qui id facit quod lex prohibet.</p>
    </div>
  </div>
  
 ...

SCSS

body {
  font-family: "-apple-system", BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  padding: 20px 20px 0;
}

// Variables
$accordion__border-color: #264653;


.accordion {
  border: 1px solid $accordion__border-color;
  border-radius: 4px;

  .item {
    overflow: hidden;

    input {
      position: absolute;
      width: 0;
      height: 0;
      z-index: -1;
      overflow: hidden;
      visibility: hidden;

      &:checked {
        ~.headline {
          background: lighten($accordion__border-color, 10%);
        }

        ~.content {
          max-height: 100vh;
          padding: 10px;
        }
      }
    }

    .headline {
      font-size: 18px;
      display: block;
      padding: 10px;
      background: $accordion__border-color;
      color: #fff;
      cursor: pointer;

      &:hover {
        background: lighten($accordion__border-color, 10%);
        transition: all 200ms;
      }
    }

    .content {
      max-height: 0;
      padding: 0 10px;
      /* transition: all 200ms linear; */

      p {
        margin: 0 0 1rem;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}