JSFiddle - React, Tailwind, and code Playground

by anoopsuda

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <button id="cardsToggle">Show First Div</button>
    <button id="tableviewToggle">Show Second Div</button>

    <div class="requestcards">First Div Content</div>
    <div class="requestTable hide">Second Div Content</div>

CSS

.hide {
    display: none;
}

.block {
    display: block;
}

.content {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #000;
}

JavaScript

$(document).ready(function() {
    $('.cardsToggle').click(function() {
        $('.requestcards').removeClass('hide').addClass('block');
        $('.requestTable').removeClass('block').addClass('hide');
    });

    $('.tableviewToggle').click(function() {
        $('.requestcards').removeClass('block').addClass('hide');
        $('.requestTable').removeClass('hide').addClass('block');
    });
});