JSFiddle - React, Tailwind, and code Playground

by navyflower

HTML

<div class="tex2jax">
    <div class="collapse-header step-header"></div>
    <div class="collapse-content step-header">
        <p>Pierwszy header</p>
    </div>
    <div class="collapse-header step-content"></div>
    <div class="collapse-content step-content">
        <p>Pierwszy content</p>
    </div>
</div>
<div class="tex2jax">
    <div class="collapse-header step-header"></div>
    <div class="collapse-content step-header">
        <p>Drugi header</p>
    </div>
    <div class="collapse-header step-content"></div>
    <div class="collapse-content step-content">
        <p>Drugi content</p>
    </div>
</div>
<div class="tex2jax">
    <div class="collapse-header step-header"></div>
    <div class="collapse-content step-header">
        <p>Trzeci header</p>
    </div>
    <div class="collapse-header step-content"></div>
    <div class="collapse-content step-content">
        <p>Trzeci content</p>
    </div>
</div>

CSS

.tex2jax {
    margin-bottom: 30px;
}
.ui-accordion-header.ui-state-active {
    border-bottom: 0;
    cursor: auto;
    padding-top:5px;
    padding-bottom: 0;

}
.ui-accordion-header.step-header {
    background: yellow;
}

.collapse-content:nth-child(2) {
    background: yellow;
}

JavaScript

var $tex2jax = $(".tex2jax");
$tex2jax.accordion({
    header: ".collapse-header",
    icons: false,
    active: "false",
    disabled: true,
    heightStyle: "content",
    activate: function( event, ui ) {
        if (ui.oldPanel.length > 0) {
            var $nextStep = $(this).next();
            var is_dis = $nextStep.accordion("option", "disabled");
            if (is_dis) {
                $nextStep.accordion("option", {
                "disabled": false,
                active: 0
            });
            }
            
        }
        
    }
});

//Activate first accordion
$tex2jax.first().accordion("option", {
    active: 0,
    disabled: false
});

    
//$tex2jax.first().accordion( "option", "active", 0 );