JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="view-source">
    <a href="#"><i class="fa fa-plus"></i>My Question 1?</a>
              <div class="hide" style="display: none;">My Answer</div>
            </div>
<div class="view-source">
              <a href="#"><i class="fa fa-plus"></i>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, .view-source a.test {
  background: #eee;
    color: #ffad81;
}
.view-source i {
    margin-right: 5px;
}
.test .fa-plus:before{
  content:"\f068";
}

JavaScript

$('.view-source .hide').hide();
    $a = $('.view-source a');
    $a.on('click', function(event) {
      event.preventDefault();
      $a.not(this).removeClass('test').next().slideUp(800);
      $(this).toggleClass('test').next().slideToggle(800);
    });