JSFiddle - React, Tailwind, and code Playground

HTML

<button class="panel-button" data-panel="panel1">1</button>
    <button class="panel-button" data-panel="panel2">2</button>
    <button class="panel-button" data-panel="panel3">3</button>
    <button class="panel-button" data-panel="panel4">4</button>
    <div class="wrapper">
        <div id="panel1">1</div>
        <div id="panel2">2</div>
        <div id="panel3">3</div>
        <div id="panel4">4</div>
    </div>

CSS

.wrapper {
            overflow: hidden;
            width: 420px;
        }

.wrapper > div {
    width: 100px;
    height: 100px;
    background: green;
    float: left;
    margin-left: 5px;
    margin-top: 10px
}

JavaScript

$(function() {

            $('.panel-button').on('click',function(){
                var panelId = $(this).data('panel');// attr('data-panel')
                console.log($('#'+panelId).css('visibility'));
                if($('#'+panelId).css('visibility') === 'hidden') {    
                    
                    $('#'+panelId).css('visibility','visible');
                }
                else {
                    
                    $('#'+panelId).css('visibility','hidden');
                }
                
            });

            });