JSFiddle - React, Tailwind, and code Playground

by stevea

HTML

<button id="closeAll">Close All</button>
<div 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 h3').each(function() {
				debugger;
				this$ = $(this);
                that$ = this$.next();
                console.log(that$);
				if(this$.hasClass('ui-state-active')) {
					this$.toggleClass("ui-state-active ui-state-default")
			             .next()  // move to div
						 .slideToggle(500);
	  			}
    });
});