JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<dl class="faq">
<dt>FAQ 1</dt>
<dd>Answer 1</dd>
<dt>FAQ 1</dt>
<dd>Answer 1</dd>
<dt>FAQ 1</dt>
<dd>Answer 1</dd>
</dl>

<dl class="faq">
<dt>FAQ 1</dt>
<dd>Answer 1</dd>
<dt>FAQ 1</dt>
<dd>Answer 1</dd>
<dt>FAQ 1</dt>
<dd>Answer 1</dd>
</dl>

CSS

dl {margin: 0 0 30px;}
dt {cursor: pointer;}
dt, dd {padding: 10px; background: #eee; margin: 2px;}
dl dd {background: #333; padding: 10px;}
dl dt.on {background: #000; color: #fff;}

JavaScript

$(document).ready(function(){
    $('.faq dd').hide();
    $('.faq > dt').toggle(function() {
        $(this).next().show().prev().addClass('on');
    }, function() {
        $(this).next().hide().prev().removeClass();
    });      
});