JSFiddle - React, Tailwind, and code Playground

by mischah

HTML

<div class="toggleContainer">
    
    <h1 class="toggler">Toggler 1</h1>
    <div class="toggleContent">
        <h2>Content</h2>
        <p>Hier kann alles möglich drin sein.</p>
    </div>
    
    <h1 class="toggler">Toggler 2</h1>
    <div class="toggleContent">
        <h2>Huhu</h2>
        <p>Pellentesque habitant morbi tristique senectus.</p>
    </div>
    
</div>

CSS

.toggleContainer .toggleContent {
    display:none;
}

.toggleContainer .toggler {
    cursor: pointer;
}

JavaScript

// Self calling anonymous function to make of use the $ shortcut
// Even when using jQuery.noConflict();
(function ($) {
    // Short form of $(document).ready();
    $(function () {
        // Code goes here  …
        
        var toggleContainer = $('.toggleContainer');
        var toogleSpeed = 200; 
        
        $('.toggler', toggleContainer).toggle(function() {
            $(this).next('.toggleContent').slideDown(toogleSpeed);
        }, function() {
            $(this).next('.toggleContent').slideUp(toogleSpeed);
        });
        
    });
}(jQuery));