JSFiddle - React, Tailwind, and code Playground

HTML

<button id="closeAll">Close All</button>
<div class="qa" id='qa'>
    <h3> This is question 1</h3>
    <div>This is  the answer to question 1</div>
     <h3> This is question 2</h3>
    <div>This is  the answer to question 2</div>
</div>

CSS

h3 {
    margin:0;
}

JavaScript

$(function(){  
    $("#qa").find("h3")
		    .addClass("ui-state-default")
		    .click(function() {
		               $(this).toggleClass("ui-state-active ui-state-default")
			                  .next()
                              .slideToggle(500);
		               return false;
		     })
		     .next()
		     .hide();  // start with all answers hidden
});

$('button#closeAll').click(function() {
    $('.qa div').slideUp(500);  
});