JSFiddle - React, Tailwind, and code Playground

HTML

<div id="authors" class="widget">
    <h2 class="widget-title-visible">Authors</h2>
    <div class="toggle">
        <div class="submenu">
            <ul>
                <li>Name 1</li>
                <li>Name 2</li>
                <li>Name 3</li>
                <li>Name 3</li>
            </ul>
        </div>
    </div>
</div>


<div id="archives" class="widget">
    <h2 class="widget-title">Archiv</h2>
    <div class="toggle hidden">
        <div class="submenu">       
            <ul>
                    <li>November 2012</li>
                <li>Oktober 2012</li>
            </ul>
        </div>
    </div>
</div>

CSS

body {
    font-size: 0.875em; 
    line-height: 1.5em; 
}

.hidden{
    display:none;
}

h2 {
    font-size: 1.25em;
}

.plus {
    background: url(http://moargh.de/daten/sidebar_arrows.png) 0 5px no-repeat;
    padding: 0 0 0 12px;
}
.minus {
    background: url(http://moargh.de/daten/sidebar_arrows.png) 0 -10px no-repeat;
    padding: 0 0 0 12px;
}

JavaScript

function toggleWidgets() {
        jQuery('.widget-title').addClass('plus'); 

        jQuery('.widget-title-visible').addClass('minus'); 



        jQuery('.widget-title-visible').click(function() {
            $(this).toggleClass('minus').toggleClass('plus').next().toggle(180);
        });

     
        jQuery('.widget-title').click(function() {
            $(this).toggleClass('plus').toggleClass('minus').next().toggle(180);
        });

    } 
    
    jQuery(document).ready(function() {
        toggleWidgets();
    } )