JSFiddle - React, Tailwind, and code Playground

HTML

<div id='accordion'>
    <h3>Titolo</h3>
    <ul>
        <li>Test 1</li>
        <li>Test 1</li>
        <li>Test 1</li>
        <li>Test 1</li>                
    </ul>
    <h3>Altro titolo</h3>
    <ul>
        <li>Test 2</li>
        <li>Test 2</li>
        <li>Test 2</li>
        <li>Test 2</li>                
    </ul>
    <h3>Terzo titolo</h3>
    <ul>
        <li>Test 3</li>
        <li>Test 3</li>
        <li>Test 3</li>
        <li>Test 3</li>                
    </ul>
</div>

CSS

#accordion h3 {
    color: #58C;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
}
#accordion ul {
    display: none;
}

JavaScript

(function($) {
    $.fn.tinyAccordion = function(options) {
        // valori di default
        var config = {
            'bookmark': 'h3',
            'content': 'div'
        };
        $this = this.selector;
        if (options) $.extend(config, options);
        
        // costruisco i selettori per i segnalibri (i "link" da cliccare) ed i rispettivi contenuti)
        bookmark = $($this + " " + config.bookmark);
        content = $($this + " " + config.content);
        
        // aggiungo gli attributi "data" a segnalibri e contenuti
        var i = 1;
        bookmark.each(function() {
            $this = $(this);
            $this.attr("data-accordion-switch", "el" + i);
            $this.next(config.content).attr("data-accordion-list", "el" + i);
            i++;
        });

        // accordion!!
        bookmark.on('click', function() {
            $this = $(this);
            var element = $(config.content + '[data-accordion-list="'+ $this.data('accordionSwitch') +'"]');
               
            content.slideUp('fast');
            if (element.is(":hidden")) {
                element.slideDown('fast');
            }
        });
        return this;
    }
})(jQuery);

    
$('#accordion').tinyAccordion({
    'bookmark': 'h3',
    'content': 'ul'        
});