JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<h2> here is some interesting links </h2>
<ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
</ul>

CSS

h2 + ul {
    display: none;
}

JavaScript

$('h2').html(
    function(i,h) {
        return h + '<span>[+]</span>';
    }).on('click', 'span', function(){
        var that = $(this);
        that.closest('h2').next('ul').toggle();
        that.text(
            function(){
                return that.text().indexOf('+') !== -1 ? '[-]' : '[+]';
            });
    });