JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<div id="accordion2" class="accordion panel-group">

  <div class="accordion-group panel panel-default">
    <div class="panel-heading accordion-heading ">
      <a href="#collapse5" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle panel-title accordion-title">
             Lorem ipsum dolor sit amet ..
            </a>
    </div>
    <div class="accordion-body collapse" id="collapse5">
      <div class="accordion-inner panel-body">

        <div class="row">
          <div class="col-md-10">

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit faucibus elit nec mollis. Phasellus tempor urna tellus, eget lobortis magna porttitor eget. Sed risus ex, ultrices ac quam at, ultrices feugiat dolor. Mauris nec fermentum arcu.
            <br>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Peças escritas e desenhadas (39.5 MB)</a>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Formulário de Participação (101 KB)</a>
          </div>
          <div class="col-md-2">
            <button class="pull-right" href="#">Participa</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="accordion-group panel panel-default">
    <div class="panel-heading accordion-heading">
      <a href="#collapse7" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle panel-title accordion-title">
               Donec vitae efficitur magna...
            </a>
    </div>
    <div class="accordion-body collapse"...

CSS

.accordionPannelActive {
          background-color: #8dc640!important;
          color: white !important;
        }
        
        a.accordion-title:focus {
          color: inherit;
          text-decoration: none;
        }
        
        .panel-default > .panel-heading {
            background-image: none;
        }
        a.accordion-title:hover {
          color: inherit;
          background-color: inherit;
          text-decoration: none;
        }
        
        .panel-default > .panel-heading {
            background-image: none;
        }
        
        .accordion-title{
          display:block;
        }

JavaScript

$(function() {
  $('a.accordion-toggle').click(function(e) {
    e.preventDefault();
    if (!$(this).parent().hasClass('accordionPannelActive')) {
      $('.accordion-heading').removeClass('accordionPannelActive').find('a').removeClass('accordionPannelActive');
      $(this).parent().addClass('accordionPannelActive').find('a').addClass('accordionPannelActive');
    } else {
      $('.accordion-heading').removeClass('accordionPannelActive').next().removeClass('accordionPannelActive');
      $(this).parent().find('a').removeClass('accordionPannelActive');
    }
  });
});