JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<ul>
    <li class="q">Question One</li>
    <li>first answer to question one</li>
    <li>second answer to question one</li>
    <li class="q">Question two</li>
    <li>first answer to question two</li>
    <li>second answer to question two</li>
    <li class="q">Question three</li>
    <li>first answer to question three</li>
    <li>second answer to question three</li>
</ul>

CSS

li {
    color: #999;
    font-weight: normal;
}
li.q {
    font-weight: bold;
    color: black;
}

JavaScript

$('li:not(".q")').hide();

$('li.q').click(
    function(){
        $('li:not(".q")').slideUp();
        $(this).nextUntil('.q').slideDown();
    });