JSFiddle - React, Tailwind, and code Playground
HTML
<div class="FAQ-box cf">
<a class="fx left FAQ-pergunta">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</a>
<img src="http://www.plix.pl/assets/icon_ok-543a20ce5b5f94d874090136943870d7.png" class="middle FAQ-abre right" /><img src="http://www.devel.audax.org.br/image/c_icon_x.gif" class="middle FAQ-fecha right" />
<div class="clear FAQ-conteudo">
In risus leo, rhoncus vel hendrerit sed, porttitor nec odio. Cras felis arcu, lobortis non nulla a, consectetur accumsan libero. Nulla facilisi. Maecenas sollicitudin erat arcu, id malesuada.
<br /><br />
Maecenas nisl massa, hendrerit at augue vitae, facilisis ullamcorper dolor. Cras tincidunt erat id vehicula aliquet. Nulla venenatis sodales neque, ultrices sodales libero lacinia vel. Nulla facilisi. Mauris accumsan urna tortor, et adipiscing diam viverra vel. Phasellus aliquet nulla sit amet est ornare bibendum.
<br /><br />
In risus leo, rhoncus vel hendrerit sed, porttitor nec odio. Cras felis arcu, lobortis non nulla a, consectetur accumsan libero. Nulla facilisi. Maecenas sollicitudin erat arcu, id malesuada lectus ultricies nec. Maecenas nisl massa, hendrerit at augue vitae, facilisis ullamcorper dolor. Cras tincidunt erat id vehicula aliquet. Nulla venenatis sodales neque, ultrices sodales libero lacinia vel. Nulla facilisi.
</div>
</div>
<!-- Pergunta 3 -->
<div class="FAQ-box cf">
<a class="fx left FAQ-pergunta">Suspendisse ac lectus ut ante consequat accumsan?</a>
<img src="http://www.plix.pl/assets/icon_ok-543a20ce5b5f94d874090136943870d7.png" class="middle FAQ-abre right" /><img src="http://www.devel.audax.org.br/image/c_icon_x.gif" class="middle FAQ-fecha right" />
<div class="clear FAQ-conteudo">
In risus leo, rhoncus vel hendrerit sed, porttitor nec odio. Cras felis arcu, lobortis non nulla a, consectetur accumsan libero. Nulla facilisi. Maecenas sollicitudin erat arcu, id malesuada.
<br /><br />
Maecenas nisl massa,...
CSS
.FAQ-box { border:1px #E7E7E7 solid; border-bottom:0; padding:20px; }
.FAQ-box:last-child { border-bottom:1px #E7E7E7 solid; }
.FAQ-pergunta { cursor:pointer; color:#3D3D3D; font-size:18px; font-family:'GothamNarrow-Book'; }
.FAQ-pergunta:hover { color:#193967; }
.FAQ-atual { font-size:19px; }
.FAQ-conteudo { padding:25px 10px 0 10px; color:#3D3D3D; font-size:18px; }
JavaScript
var SC = jQuery.noConflict();
SC(document).ready(function() {
SC('.FAQ-conteudo').hide();
SC('.FAQ-fecha').hide();
SC('.FAQ-pergunta').removeClass('FAQ-atual');
SC('.FAQ-pergunta').click(function(){
var $this = SC(this);
var $pai = $this.parent();
var faqTemClasse = SC('.FAQ-pergunta', $pai).hasClass('FAQ-atual');
if (faqTemClasse) {
SC('.FAQ-pergunta', $pai).removeClass('FAQ-atual');
SC('.FAQ-conteudo', $pai).fadeOut(300);
SC('.FAQ-fecha', $pai).hide();
SC('.FAQ-abre', $pai).show();
} else {
SC('.FAQ-conteudo', $pai).fadeOut(300);
SC('.FAQ-pergunta', $pai).addClass('FAQ-atual');
SC('.FAQ-conteudo', $pai).fadeIn(300);
SC('.FAQ-fecha', $pai).show();
SC('.FAQ-abre', $pai).hide();
}
});
});