JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="accordion">
  <div class="accordion__item">
    <div class="accordion__title">test+</div>
    <div class="accordion__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates amet possimus cumque eos explicabo, rem nihil minus, rerum dolores. Cum doloribus eaque earum beatae, aliquam perspiciatis ipsam laboriosam pariatur aperiam.</div>
  </div>
  <div class="accordion__item">
    <div class="accordion__title">test+</div>
    <div class="accordion__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates amet possimus cumque eos explicabo, rem nihil minus, rerum dolores. Cum doloribus eaque earum beatae, aliquam perspiciatis ipsam laboriosam pariatur aperiam.</div>
  </div>
  <div class="accordion__item">
    <div class="accordion__title">test+</div>
    <div class="accordion__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates amet possimus cumque eos explicabo, rem nihil minus, rerum dolores. Cum doloribus eaque earum beatae, aliquam perspiciatis ipsam laboriosam pariatur aperiam.</div>
  </div>
  <div class="accordion__item">
    <div class="accordion__title">test+</div>
    <div class="accordion__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates amet possimus cumque eos explicabo, rem nihil minus, rerum dolores. Cum doloribus eaque earum beatae, aliquam perspiciatis ipsam laboriosam pariatur aperiam.</div>
  </div>
  <div class="accordion__item">
    <div class="accordion__title">test+</div>
    <div class="accordion__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates amet possimus cumque eos explicabo, rem nihil minus, rerum dolores. Cum doloribus eaque earum beatae, aliquam perspiciatis ipsam laboriosam pariatur aperiam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates amet possimus cumque eos explicabo, rem nihil minus, rerum dolores. Cum doloribus eaque earum beatae, aliquam perspiciatis ipsam laboriosam...

SCSS

.accordion {
  &__item {
  }
  &__title {
    
  }
  &__content {
    transform: scaleY(0);
    transition: 1s;
    transform-origin: top;
    &.active {
      transform: scaleY(1);
      height: auto;
    }
  }
}

JavaScript

[...document.querySelectorAll('.accordion__title')].map((el) => {
  el.addEventListener('click', function(){
    el.nextElementSibling.classList.toggle('active')
  })
})