JSFiddle - React, Tailwind, and code Playground

by Blender

HTML

<ul class="q-and-a">
    <li>
        <span class="question">Question One</span>
        <div class="answer">Answer</div>
    </li>
    
    <li>
        <span class="question">Question Two</span>
        <div class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit pretium velit eu vestibulum. Curabitur laoreet ligula vel nunc imperdiet nec convallis sem ultricies. Fusce nulla ipsum, aliquam id semper et, interdum at erat. Suspendisse vitae justo sed augue bibendum luctus et non magna. Nulla non tempus turpis.</div>
    </li>
    
    <li>
        <span class="question">Question Three</span>
        <div class="answer">Answer</div>
    </li>
    
    <li>
        <span class="question">Question Four</span>
        <div class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit pretium velit eu vestibulum. Curabitur laoreet ligula vel nunc imperdiet nec convallis sem ultricies. Fusce nulla ipsum, aliquam id semper et, interdum at erat. Suspendisse vitae justo sed augue bibendum luctus et non magna. Nulla non tempus turpis. Fusce congue tincidunt est, nec ullamcorper nulla sollicitudin in. Etiam dignissim aliquet auctor. Maecenas condimentum vehicula odio quis fermentum. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ut libero tellus. Nam faucibus tristique libero sit amet suscipit. Praesent vel lectus neque. Maecenas a eros nibh.</div>
    </li>
</ul>

CSS

ul.q-and-a
{
    border: 1px solid rgb(100, 100, 100);
}

ul.q-and-a li
{
    position: relative;
}

.question
{
    display: block;
    padding: 10px;
    background-color: rgb(150, 150, 150);
    border-bottom: 1px solid rgb(100, 100, 100);
    
    font-size: 25px;
    cursor: pointer;
}

.question:hover
{
    background-color: rgb(175, 150, 150);
}

.active
{
    background-color: rgb(200, 150, 150) !important;
}

.answer
{
    display: none;
    padding: 10px;
}

JavaScript

$('.question').click(function()
{
    $('.question').removeClass('active');
    
    if ($(this).siblings('.answer').is(':visible'))
    {
        $(this).siblings('.answer').stop().slideUp();
    } else {
        $(this).addClass('active');
        $('.answer').stop().slideUp();
        $(this).siblings('.answer').stop().slideDown();
    }
});