JSFiddle - React, Tailwind, and code Playground

by Muhamad Nauval Azhar

HTML

<div class="faqs_container_wrapper">

  <div class="faq_container">

    <div class="faq_down-arrow"></div>
    <div class="faq_up-arrow"></div>

    <h3><span title="Question">Q</span> Post question here</h3>
<div class="answer">
<p><b><i>Answer</i>:</b> Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer
      here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here.
    </p>
    <p>Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here.
      Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here.
    </p>
    </div>
  </div>

  <div class="faq_container">

    <div class="faq_down-arrow"></div>
    <div class="faq_up-arrow"></div>

    <h3><span title="Question">Q</span> Post question here</h3>
<div class="answer">
    <p><b><i>Answer</i>:</b> Post answer here</p>
    </div>
  </div>

  <div class="faq_container">

    <div class="faq_down-arrow"></div>
    <div class="faq_up-arrow"></div>

    <h3><span title="Question">Q</span> Post question here</h3>
<div class="answer">
    <p><b><i>Answer</i>:</b> Post answer here <a href="#">Test</a></p>
    </div>
  </div>

  <div class="faq_container">

    <div class="faq_down-arrow"></div>
    <div class="faq_up-arrow"></div>

    <h3><span title="Question">Q</span> Post question here</h3>
    <div class="answer">
<p><b><i>Answer</i>:</b> Post answer here</p>
</div>
  </div>

  <div class="faq_container">

    <div...

CSS

.faqs_container_wrapper {
  width: calc(100% - 40px);
  padding: 0 0 20px 0;
  margin: 20px 20px 0 20px;
  background: #F1F1F1;
  box-shadow: inset 0 1px #FFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  float: left;
}

.faq_container {
  width: calc(100% - 40px);
  padding: 0;
  margin: 20px 20px 0 20px;
  background: #DDD;
  border-radius: 3px 3px 0 0;
  float: left;
  position: relative;
  overflow: hidden;
}

.faq_down-arrow {
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  background: red;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.faq_up-arrow {
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  background: blue;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.faq_container h3 {
  width: 100%;
  height: 40px;
  padding: 0 5px;
  margin: 0;
  background: #D1D1D1;
  box-shadow: 0 1px #E1E1E1;
  border-bottom: 1px solid #333;
  border-radius: 3px 3px 0 0;
  float: left;
  color: #333;
  line-height: 40px;
  cursor: pointer;
}

.faq_container:nth-of-type(2n) h3 {
  background: #C1C1C1;
}

.faq_container h3 span {
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 5px;
  background: linear-gradient(#E67E22, #D35400);
  box-shadow: inset 0 1px #F39C12;
  border: 1px solid #E67E22;
  border-radius: 50%;
  float: left;
  color: #FFF;
  line-height: 29px;
  text-align: center;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.1);
}

.faq_container p {
  width: 100%;
  padding: 0 20px;
  margin: 20px 0 0 0;
  float: left;
}

.faq_container p:last-of-type {
  padding: 0 20px 20px 20px;
}

.faq_container p a,
.faq_container a {
  color: #C0392B;
}

.faq_container p a:hover,
.faq_container a:hover {
  color: #E74C3C;
}

.answer {
  display: inline-block;
  width: 100%;
  height: auto;
  display: none;
}

JavaScript

$('.faq_container').on('click', function () {
var $this = $(this);
	$(this).find('.faq_up-arrow, .faq_down-arrow').toggle();
	if ( $(this).hasClass("active")) {
		$(this).find(".answer").slideUp();
    $(this).removeClass("active");
	} else {
		$(this).find(".answer").slideDown();
  	$(this).addClass("active");
	}
});