JSFiddle - React, Tailwind, and code Playground

HTML

<div class="view-source">
              <a href="#">My Question 1?</a>
              <div class="hide" style="display: none;">My Answer</div>
            </div>
<div class="view-source">
              <a href="#">My Question 2?</a>
              <div class="hide" style="display: none;">My Answer</div>
            </div>

CSS

.view-source {
  margin-bottom: 10px;
}

.hide {
  border: 1px solid #eee;
  border-top: none;
  font-size: 16px;
  padding: 10px;
  display: block;
}

.view-source a:link, .view-source a:visited {
  background: #F3F2EE;
  box-shadow: 1px 1px #ccc;
  border: 5px;
  border: none;
  clear: both;
  color: #000;
  display: block;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  text-decoration: none;
  padding-left: 10px;
  border: 1px solid #eee;
}

.view-source a:hover {
  background: #eee;
    color: #ffad81;
}

JavaScript

$('.view-source .hide').hide();
    $a = $('.view-source a');
    $a.on('click', function(event) {
      event.preventDefault();
      $a.not(this).next().slideUp(800);
      $(this).next().slideToggle(800);
      
      $(this).css("color", "#ffad81");
      $a.not(this).css("color", "#000");
    });