JSFiddle - React, Tailwind, and code Playground

by Ashish Kumar

HTML

<h2 class="question">
          Q1: (the first question)
          <span class="q_open"></span>
          <span class="q_close"></span>
        </h2>
<div class="answer" style="display: none;">
  This should only open when clicked by the <span class="q_open"> for Q1.</span>span>
</div>
<h2 class="question">
          Q2: (the second question)
          <span class="q_open"></span>
  <span class="q_close"></span>
  </h2>
<div class="answer" style="display: none;">
  <p>
    This should only open when clicked by the <span class="q_open"> for Q2.</span>
  </p>
</div>

CSS

.q_open, .q_close{
  display: inline-block;
  background: #EEE;
  border: 1px solid #DDD;
  padding: 5px;
  cursor: pointer;
}

.q_open:hover{
  background: #060;
  color: #FFF;
}

.q_close:hover{
  background: #C00;
  color: #FFF;
}

.q_open:after {
  content: ">";
}

.q_close:after {
  content: "x";
}

JavaScript

$(function() {
  $(".q_open").click(function() {
  	// Select the related target to open
    $(this).closest("h2").next(".answer").slideDown();
  });

  $(".q_close").click(function() {
  	// Select the related target to close
    $(this).closest("h2").next(".answer").slideUp();
  });
});