JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="question-item">
    <div class="question-item__flex">
        <h3 class="question-item__title">Что такое Landing page?</h3>
        <div class="question-item__icon">›</div>
    </div>
    <p class="question-item__text none">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan</p>
</div>
<div class="question-item">
    <div class="question-item__flex">
        <h3 class="question-item__title">Что такое Landing page?</h3>
        <div class="question-item__icon">›</div>
    </div>
    <p class="question-item__text none">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan</p>
</div>

CSS

.none {
  display: none;
}
.question-item__flex {
  cursor: pointer;
}

JavaScript

let opAcc = {
  items: [...document.getElementsByClassName(`question-item`)],
  events: {
    click: e => {
      if (e.target.classList.contains(`question-item__title` || `question-item__icon` && `question-item__flex`))
        opAcc.items.forEach( i => i.lastElementChild.classList[i === e.target.closest(`.question-item`) ? `remove` : `add`](`none`));
    }
  },
};
opAcc.items[0].parentElement.addEventListener(`click`, opAcc.events.click);