JSFiddle - React, Tailwind, and code Playground

by Danny Hearnah

HTML

<div class="faq">
    this is my question
    <div class="answer">this is my answer</div>
</div>
<div class="faq">
    this is my question
    <div class="answer">this is my answer</div>
</div>
<div class="faq">
    this is my question
    <div class="answer">this is my answer</div>
</div>
<div class="faq">
    this is my question
    <div class="answer">this is my answer</div>
</div>

CSS

.faq .answer {
    display:none;
    color:red;
}

.faq {
    cursor:pointer;
    margin-bottom:10px;
    border-bottom:solid 1px;
}

JavaScript

$(document).ready(function(e){
    $('.faq').on('click',function(e){
        if( $(this).hasClass('faq_active') )
        {
            return;
        }
        
        $('.faq_active').removeClass('faq_active').find('.answer').slideUp();
        $(this).addClass('faq_active').find('.answer').slideDown();
        
    });
});