JSFiddle - React, Tailwind, and code Playground

by johnbk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<h2>Help</h2>
<div class="qna">
  <div class="tab" id="tab1">
  <h3>How can we help?</h3>
  <h4>Section 1</h4>
  <div class="help">
    <h5><button class="question"><i class="down"></i> Section 1 - Question 1 </button></h5>
    <div class="answer">
      Section 1 - Answer 1
    </div>
    <h5><button class="question"><i class="down"></i> Section 1- Question 2 </button></h5>
    <div class="answer">
      Section 1 - Answer 2
    </div>
  </div>
  <h4>Section 2</h4>
  <div class="help">
    <h5><button class="question"><i class="down"></i> Section 2 - Question 1 </button></h5>
    <div class="answer">
      Section 2 - Answer 1
    </div>
    <h5><button class="question"><i></i> Section 2- Question 2 </button></h5>
    <div class="answer">
      Section 2 - Answer 2
    </div>
  </div>
</div>
  <div class="tab" id="tab2">
  </div>
  <div class="tab" id="tab3">
  </div>
</div>

CSS

.help {
  font-size: 14px;
}

.tab {
  display: none;
}
.qna h3 {
  font-size: 18px;
}

.qna h4 {
  font-size: 16px;
}

.qna button {
  background-color: #efefef;
  width: 100%;
  text-align: left;
  font-size: 14px;
}

.qna i {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  margin-right: 10px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.qna i.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.help .answer {
  display: none;
}

JavaScript

$('.help .question').click(function(){
    $(this).find('i').toggleClass('up');
    $(this).closest('h5').next('.answer').toggle(400);
});