JSFiddle - React, Tailwind, and code Playground

HTML

<div class="questions">
							<div class="question">
								<div class="question-text" href="#answer-52"><img src="images/plus-eclipse.png"> Question 1</div>
								<div id="answer-52" class="answer-section-content">
									<p>Answer 1</p>
								</div>
							</div>
							<div class="question">
								<div class="question-text" href="#answer-53"><img src="images/plus-eclipse.png"/> Question 2</div>
								<div id="answer-53" class="answer-section-content">
									<p>Answer 1</p>
								</div>
							</div>
    </div>

CSS

body{ background: black };
.questions{
  padding-top: 25px;
  padding-left: 170px;
  padding-bottom: 25px;
}
.question{
  padding: 5px;
  font-size: 18px;
  font-weight: 100;
  color: #ffffff;
}
.answer-section-content {
  display:none;
  padding: 2px;
}

JavaScript

$(document).ready(function() {
	function close_answer_section() {
		$('.question-text').removeClass('active');
		$('.answer-section-content').slideUp(300).removeClass('open');
	}

	$('.question-text').click(function(e) {
		var currentAttrValue = $(this).attr('href');

		if($(e.target).is('.active')) {
			close_answer_section();
		}else {
			close_answer_section();

			$(this).addClass('active');
			$('.questions ' + currentAttrValue).slideDown(300).addClass('open'); 
		}

		e.preventDefault();
	});
});