.elementor-2686 .elementor-element.elementor-element-793f3b0{--display:flex;--background-transition:0.3s;}.elementor-2686 .elementor-element.elementor-element-06d64f8 .elementor-menu-toggle{margin:0 auto;}.elementor-2686 .elementor-element.elementor-element-7f4ac95.elementor-element{--align-self:center;}.elementor-2686 .elementor-element.elementor-element-862f6eb{--display:flex;--background-transition:0.3s;}.elementor-2686 .elementor-element.elementor-element-850bc15{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--background-transition:0.3s;}.elementor-2686 .elementor-element.elementor-element-6c4bc4a .elementor-button{font-family:"Roboto", Sans-serif;font-size:20px;font-weight:500;background-color:#4080F1;}.elementor-2686 .elementor-element.elementor-element-12bc81c .elementor-button{font-family:"Roboto", Sans-serif;font-size:20px;font-weight:500;background-color:#4080F1;}.elementor-2686 .elementor-element.elementor-element-f432c75 .elementor-button{font-family:"Roboto", Sans-serif;font-size:20px;font-weight:500;background-color:#4080F1;}.elementor-2686 .elementor-element.elementor-element-48b8177 .elementor-button{font-family:"Roboto", Sans-serif;font-size:20px;font-weight:500;background-color:#4080F1;}.elementor-2686 .elementor-element.elementor-element-995eace{--display:flex;--background-transition:0.3s;}.elementor-2686 .elementor-element.elementor-element-3799e32.elementor-element{--align-self:center;}.elementor-2686 .elementor-element.elementor-element-3799e32 .elementor-button{font-family:"Roboto", Sans-serif;font-size:20px;font-weight:500;}.elementor-2686 .elementor-element.elementor-element-71cd564{--display:flex;--background-transition:0.3s;}.elementor-2686 .elementor-element.elementor-element-64aa5e9 .elementor-button{font-family:"Roboto", Sans-serif;font-size:20px;font-weight:500;background-color:#8C61CE;}.elementor-2686 .elementor-element.elementor-element-8faff74{--display:flex;--background-transition:0.3s;}.elementor-2686 .elementor-element.elementor-element-95eae47{--display:flex;--background-transition:0.3s;}@media(max-width:1024px){.elementor-2686 .elementor-element.elementor-element-850bc15{--grid-auto-flow:row;}}@media(min-width:768px){.elementor-2686 .elementor-element.elementor-element-793f3b0{--content-width:1140px;}}@media(max-width:767px){.elementor-2686 .elementor-element.elementor-element-850bc15{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS */<!-- Toggle Buttons -->
<div class="page-toggle-table">
    <div style="margin-bottom: 20px;">
        <button id="toggleTable1" class="toggle-button">Show Table 1</button>
        <button id="toggleTable2" class="toggle-button">Show Table 2</button>
    </div>

    <!-- wpDataTables -->
    <div id="table1" class="wpdatatable">
        [wpdatatable id=1] <!-- Replace with your first table shortcode -->
    </div>
    <div id="table2" class="wpdatatable" style="display: none;">
        [wpdatatable id=2] <!-- Replace with your second table shortcode -->
    </div>
</div>

<!-- Styles -->
<style>
    .page-toggle-table .wpdatatable {
        display: none;
    }
    .page-toggle-table .toggle-button {
        margin: 10px;
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        cursor: pointer;
        font-size: 16px;
    }
    .page-toggle-table .toggle-button:hover {
        background-color: #0056b3;
    }
</style>

<!-- JavaScript to toggle shortcodes -->
<script>
    // Check if we're on the page with the .page-toggle-table class
    if (document.body.classList.contains('page-toggle-table')) {
        document.getElementById("toggleTable1").onclick = function() {
            document.getElementById("table1").style.display = 'block';
            document.getElementById("table2").style.display = 'none';
        };

        document.getElementById("toggleTable2").onclick = function() {
            document.getElementById("table2").style.display = 'block';
            document.getElementById("table1").style.display = 'none';
        };

        // Optionally set the initial table to be visible
        document.getElementById("table1").style.display = 'block';  // Default table (Table 1)
        document.getElementById("table2").style.display = 'none';   // Hide Table 2 initially
    }
</script>/* End custom CSS */