JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<div class="main">FAQ
  <div class="section">Section 1
      <div class="question">Question 1-1
          <div class="answer">Answer 1-1</div>
      </div>
      <div class="question">Question 1-2
          <div class="answer">Answer 1-2</div>
      </div>
  </div>
  <div class="section">Section 2
      <div class="question">Question 2-1
          <div class="answer">Answer 2-1</div>
      </div>
      <div class="question">Question 2-2
          <div class="answer">Answer 2-2</div>
      </div>
  </div>
</div>

CSS

.main { font: bold small-caps 13px/1.5 sans-serif;cursor:pointer; }
.section { margin-left:10px;color:#006;}
.question { margin-left:20px;color:#006;}
.answer { margin-left:30px;color:#00c;}
/*.main div, */.section div, .question div { display:none;}

/* ADD
---------------------------------------- */

.add a:before {
    width:16px;
    height:16px;
    /* css3 */
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    border-radius:16px;
}

.add a:after {
    left:3px;
    width:10px;
    height:2px;
    margin-top:-1px;
    background:#fff;
}

.add:before {
    z-index:10;
    left:7px;
    width:2px;
    height:10px;
    margin-top:-5px;
    background:#fff;
}

JavaScript

$(".main, .section, .question").click(function (e) {
    e.stopPropagation();
    jQuery(this).children('div').slideToggle(500);
});
/*
$(".main").click(function (e) {
    e.stopPropagation();
    jQuery(this).children('div').slideToggle(500);
});

$(".section").click(function (e) {
    e.stopPropagation();
    jQuery(this).children('div').slideToggle(500);
});
$(".question").click(function (e) {
    e.stopPropagation();
    jQuery(this).children('div').slideToggle(500);
});
*/