JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://alphaentry.com/ui/ui.core.js"></script>
<script src="http://alphaentry.com/ui/ui.accordion.js"></script>
<script src="http://alphaentry.com/js/jquery.scrollTo-1.4.2-min.js"></script>
<script src="http://alphaentry.com/js/jquery.easing.js"></script>
<div class="accordion-expand-holder">
        <table class="layout_table">
            <tr>
                <td>
                    <button type="button" class="open">
                        Expand all</button>
                    <button type="button" class="close">
                        Collapse all</button>
                </td>
                
            </tr>
        </table>

    </div>
<div class="accordion-expand-holder">
        <table class="layout_table">
            <tr>
                <td>
                    <button type="button" class="open">
                        Expand all</button>
                    <button type="button" class="close">
                        Collapse all</button>
                </td>
                
            </tr>
        </table>

    </div>
<div class="accordion-expand-holder">
        <table class="layout_table">
            <tr>
                <td>
                    <button type="button" class="open">
                        Expand all</button>
                    <button type="button" class="close">
                        Collapse all</button>
                </td>
                
            </tr>
        </table>

    </div>
<div class="accordion-expand-holder">
        <table class="layout_table">
            <tr>
                <td>
                    <button type="button" class="open">
                        Expand all</button>
                    <button type="button" class="close">
                        Collapse all</button>
                </td>
                
            </tr>
        </table>

    </div>
<div class="accordion-expand-holder">
        <table class="layout_table">
            <tr>
                <td>
       ...

CSS

h3{background:#000; color:#fff;}

JavaScript

//Accordion with scrollTo

$("#accordion").accordion({

    
    collapsible: true,
            //active: true,
            autoHeight: false,
            active: true,
            autoScrollToActive: true,
            autoScrollOffset: -50,
            //heightStyle: "content",
            activate: event_activate
    
    });


function event_activate(event, ui) {        
        var sDataValue = -1;        
        if (ui.newPanel.attr('id') == 'ui-id-2') {
            sDataValue = 0;
        }
        else if (ui.newPanel.attr('id') == 'ui-id-4') {
            sDataValue = 1;
        }
        else if (ui.newPanel.attr('id') == 'ui-id-6') {
            sDataValue = 2;
        }
        else if (ui.newPanel.attr('id') == 'ui-id-8') {
            sDataValue = 3;
        }
        else if (ui.newPanel.attr('id') == 'ui-id-10') {
            sDataValue = 4;
        }
        else if (ui.newPanel.attr('id') == 'ui-id-12') {
            sDataValue = 5;
        }
        else if (ui.newPanel.attr('id') == 'ui-id-14') {
            sDataValue = 6;           
        }
        else {
            sDataValue = -1;
        }
        var hidseq = "";//document.getElementById("<%=hidExpandCollapseStatus.ClientID%>");
//        hidseq.value = sDataValue;
    }