When we start building something we try to work in the simples, most accessible environment (browser with javascript disabled) From there we progressively enhance the accordion with features that will improve the user experience in browsers that support them, or silently fail in browsers that don’t.

What this means for our accordion is that the core function of the accordion the expand/collapse version should also work when javascript is disabled.  We solved this by adding a default ‘no-js’ class in the accordion that is removed when Javascript is available.

JS part

if( $(".awesome-accordion").length > 0 )
{
    $(".awesome-accordion.no-js").removeClass("no-js");
    prevent_focusable();
}

 
CSS part

.awesome-accordion.no-js{

    li.awesome-accordion-item{
        overflow: hidden;
    }
    
    & .awesome-accordion-panel {
        max-height: 400px;
        
    }

    input[type='checkbox'].no-js-action{
        display: block;

        position: relative;
        z-index: 1;
        
        float: left;
        
        width: 100%;
        height: 50px;
        
        margin-bottom: -50px;
        
        cursor: pointer;

        opacity: 0;
        
    }

    input[type='checkbox']:checked ~ .awesome-accordion-panel{
        position: relative;
        z-index: 0;
        margin-top: 0;
        max-height: 0;
        opacity: 0;
        transform: translate(0, 50%);
        transition: 0.25s linear;
        padding: 0;
    }

    .awesome-accordion-panel h2{
        margin-bottom: -65px;
    }

}