JSFiddle - React, Tailwind, and code Playground

by Prashant Tapase

HTML

<ul id="faqs-list" class="fd-accordion">
    <li>
        <header class="ac-header">
            <h4>1. Question 1?</h4>
            <img src="assets/images/arrow-down.png" class="arrow" alt="arrow" />
        </header>
        <div class="ac-content">
            <p>Answer 1</p>
        </div>
    </li>
    <li>
        <header class="ac-header">
            <h4>1. Question 2?</h4>
            <img src="assets/images/arrow-down.png" class="arrow" alt="arrow" />
        </header>
        <div class="ac-content">
            <p>Answer 2</p>
        </div>
    </li>
</ul>

JavaScript

$(document).ready(function() {
  $(".ac-content").hide();

  $('.ac-header').on("click", function (e) {
  $('.ac-header').not(this)
               .removeClass("active")
               .next(".ac-content")
               .hide();

  $(this).toggleClass("active")
       .next(".ac-content")
       .toggle($(this).is(".active"));
  });
});