JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<html>
    <head>
        <title>Testing script</title>
    </head>
    <body>
        
        <div class="header1">HEADER 1</div>
        <div class="header1content">HEADER 1 CONTENT HERE</div>
        
        <div class="header2">HEADER 2</div>
        <div class="header2content">HEADER 2 CONTENT HERE</div>
        
    </body>
</html>

CSS

.header1 {
    background:#ccc;
}

.header1active {
    background:#fcc;
}

.header1content {
    height:100px;
    background:#CCC;
    display:none;
    padding:10px;
}

.header2 {
    background:#ccc;
}

.header2active {
    background:#fcc;
}

.header2content {
    height:100px;
    background:#CCC;
    display:none;
}

JavaScript

var openOrClosed = false;

$('.header2')
    .mousedown(function(event) {
        event.preventDefault();
    })
    .click(function() {
        var current = $(this);
        var header2content = $('.header2content');
        if (openOrClosed === false) {
            if (current.hasClass('header2active') === false) {
                current.addClass('header2active');
            }
            header2content.slideDown('slow', function() {
                openOrClosed = true;
            });
        } else if (openOrClosed === true) {
            if (current.hasClass('header2active')) {
                current.removeClass('header2active');
            }
            header2content.slideUp('slow', function() {
                openOrClosed = false;
            });   
        }
    });