JSFiddle - React, Tailwind, and code Playground

HTML

<div class="question">I Should Start Open</div>
<div class="answer">This content to show on load.</div>
<div class="question">Click To Read Me</div>
<div class="answer">Hello content goes here</div>
<div class="question">Another Row</div>
<div class="answer">Hello content goes here</div>
<div class="question">And A Forth</div>
<div class="answer">Hello content goes here</div>

CSS

.question {
    background-color: #aaa;
    cursor: pointer;
    padding: 5px;
    position: relative;
    border:1px solid #fff;
}
.answer {
    background-color: #ccc;
    overflow: hidden;
    padding: 10px;
}

JavaScript

jQuery(document).ready(function () {
    
    jQuery(".answer").hide();
    jQuery(".question").click(function () {
        jQuery(".answer").not(jQuery(this).next(".answer")).hide();
        jQuery(this).next(".answer").toggle();
    });
    jQuery('.question:first-child').trigger('click');
});