JSFiddle - React, Tailwind, and code Playground

HTML

<div class="faq-block">
	<ul>
		<li class="question">
			
			<p><span class="plus"></span>Question 1</p>
			<p class="answer" style="display: none;">Answer 1</p>
		</li>
		<li class="question">
			
			<p><span class="plus"></span>Question 1</p>
			<p class="answer" style="display: none;">Answer 1</p>
		</li>
	</ul>
</div>

CSS

.faq-block ul, .faq-block ul li {
	list-style-type: none !important;
}
span.plus {
	display: block;
	width: 30px;
	height: 30px;
	background-color: red;
	float:left;
	margin-right: 20px;
	cursor:pointer;
}
span.minus {
	display: block;
	width: 30px;
	height: 30px;
	background-color: blue !important;
	float:left;
	margin-right: 20px;
	cursor:pointer;
}

JavaScript

$(".plus").click(function(){
$(this).toggleClass("minus plus");
});
$(".plus").click(function(){
  $(".answer").toggle();
});