JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<div class="faq">
    <h2>American Whiskeys</h2>
    <dl>
        <dt>Bourbon whiskey</dt>
            <dd>Made from mash that consists of at least 51% corn (maize)</dd>
        <dt>Corn whiskey</dt>
            <dd>made from mash that consists of at least 80% corn</dd>
        <dt>Malt whiskey</dt>
            <dd>made from mash that consists of at least 51% malted barley</dd>
        <dt>Rye whiskey</dt>
            <dd>made from mash that consists of at least 51% rye</dd>
        <dt>Rye malt whiskey</dt>
            <dd>made from mash that consists of at least 51% malted rye</dd>
        <dt>Wheat whiskey</dt>
            <dd>made from mash that consists of at least 51% wheat</dd>
    </dl>
</div>

CSS

dt {
    cursor: pointer;
}
dt:before {
    content: '+ ';
}
dt.is-active:before {
    content: '- ';
}

JavaScript

$('dd').css('display','none');

$('dt').on('click', function() {
    $(this).toggleClass('is-active').next().slideToggle();
});