JSFiddle - React, Tailwind, and code Playground

by yourbudweiser

HTML

<div id="faqs">
  <div class="faq">
    <h3 class="question">Lorem Ipsum?</h3>
    <div class="answer">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at imperdiet eros, vel cursus tellus.
      </p>
    </div>
  </div>
  <div class="faq">
    <h3 class="question">Lorem Ipsum?</h3>
    <div class="answer">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at imperdiet eros, vel cursus tellus.
      </p>
    </div>
  </div>
  <div class="faq">
    <h3 class="question">Lorem Ipsum?</h3>
    <div class="answer">
      <div class="faq">
        <h3 class="question">Lorem Ipsum?</h3>
        <div class="answer">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at imperdiet eros, vel cursus tellus.
          </p>
        </div>
      </div>
    </div>
    <div class="faq">
      <h3 class="question">Lorem Ipsum?</h3>
      <div class="answer">
        <div class="faq">
          <h3 class="question">Lorem Ipsum?</h3>
          <div class="answer">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at imperdiet eros, vel cursus tellus.
            </p>
          </div>
        </div>
      </div>
      <div class="faq">
        <h3 class="question">Lorem Ipsum?</h3>
        <div class="answer">
          <div class="faq">
            <h3 class="question">Lorem Ipsum?</h3>
            <div class="answer">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at imperdiet eros, vel cursus tellus.
              </p>
            </div>
          </div>
        </div>
      </div>

CSS

h3.question {
  background-color: yellow;
  cursor: pointer;
  margin-bottom: 5px;
}

h3.question {
  background-color: yellow;
  cursor: pointer;
  margin-bottom: 5px;
}

p {
  margin: 0;
}

.answer {
  display: none;
}

JavaScript

$(".question").click(function() {
  $(this).toggleClass('open');
  $(this).next('.answer').slideToggle('medium');
  $(this).children().toggleClass("fa-angle-right fa-angle-down");
});