JSFiddle - React, Tailwind, and code Playground

by ericjohannsen

HTML

<div class="questionGroupPicker">
    <h3 class="questionGroup" data-divid="div1">First header</h3>
    <ul id="div1">
        <li>First A</li>
        <li>First B</li>
    </ul>
    <h3 class="questionGroup" data-divid="div2">Second header</h3>
    <ul id="div2">
        <li>Second A</li>
        <li>Second B</li>
    </ul>
</div>

CSS

div.questionGroupPicker h3.questionGroup {
    background-color: blue;
    color: white;
    cursor: pointer;
}

h3.open {
    color:yellow;
}

JavaScript

jQuery(document).ready(function(){
    $('.questionGroupPicker h3.questionGroup').click(function() {
        var divid = $(this).data('divid');
        var div = $('#' + divid);
        div.toggle();
        $(this).toggleClass('open');
        return false;
    });
});