JSFiddle - React, Tailwind, and code Playground

HTML

<dl id="faq1">
    <dt>question1</dt>
    <dd>answer12</dd>
    <dt>question2</dt>
    <dd>answer2</dd>
    <dt>question3</dt>
    <dd>answer3</dd>
    <dt>question4</dt>
    <dd>answer4</dd>
</dl>
  
<dl id="faq2">
    <dt>question1</dt>
    <dd>answer1</dd>
    <dt>question2</dt>
    <dd>answer2</dd>
    <dt>question3</dt>
    <dd>answer3</dd>
    <dt>question4</dt>
    <dd>answer4</dd>
</dl>

CSS

dl { margin-top: -5px; }
dl dt { margin-top: 5px; padding: 5px; border: 1px solid #eee; cursor: pointer; }
dl dd { margin: 0; padding: 5px; border: 1px solid #eee; border-top: 0; }
dl dt.on { font-weight: bold; }

JavaScript

$.fn.setFaq = function() {
    return this.each(function(i, elm) {
        $elm = $(elm);
        $elm.find("dd").hide()
            .end().delegate("dt", "click", function() {
                $(this).next().slideToggle(200)
                    .end().toggleClass("on");
            });
    });
};

$("#faq1, #faq2").setFaq();