JSFiddle - React, Tailwind, and code Playground

by jestho

HTML

<button data-toggle="element" data-toggle-target="this" data-toggle-group="thisthat">Toggle this</button>
<button data-toggle="element" data-toggle-target="that" data-toggle-group="thisthat">Toggle that</button>
<button data-toggle="element" data-toggle-target="other" data-toggle-group="thisthat">Toggle other</button>

<div id="this">
    <h1>THIS!</h1>
</div> 
<div id="that">
    <h1>THAT!</h1>
</div>
<div id="other">
    <h1>OTHER!</h1>
</div>

CSS

body {
    padding: 20px;
}

button {
    background: white;
}

button.active {
    background: pink;
}

div {
    display: none;
    color: red;
    font-size: 36px;
    margin-top: 20px;
}

JavaScript

$('[data-toggle=element]').click(function(){
    var $target = '#' + $(this).attr('data-toggle-target');
        $group = $(this).attr('data-toggle-group');

    // Are there any other elements toggled?
    $('[data-toggle-group=' + $group + '].active').not($(this)).each(function(){
        var $target = '#' + $(this).attr('data-toggle-target');
                                
        $($target).hide();
        $(this).removeClass('active');
    });

    // Toggle target element
    $($target).toggle();

    // Toggle active class
    $(this).toggleClass('active');

});