JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accordion">
    <div id="one" class="masthead"></div>
    <div class="insider-info"></div>
    <div id="two" class="masthead"></div>
    <div class="insider-info"></div>
    <div id="three" class="masthead">c</div>
    <div class="insider-info"></div>
    <div id="four" class="masthead"></div>
    <div class="insider-info"></div>
</div>

CSS

body {
    margin: 0;
}
div.masthead {
    height: 200px;
    width: 600px;
}
div#one {
    background: red;
}
div#two {
    background: yellow;
}
div#three {
    background: blue;
}
div#four {
    background: green;
}
div.insider-info {
    background: cyan;
    height: 200px;
    width: 600px;
}

JavaScript

$(function () {

    //Checking the position of panels
    var allPanels = $('.insider-info').hide();

    //working accordion code -- needs to be smoother
    $('.accordion > .masthead').click(function (event) {

        if ($(this).hasClass('active')) {
            $(this).removeClass('active')
                .next(allPanels).slideUp(400);
        } else {
            var topPos = $(this).position();
            
            // the previously active accordion is above the new one
            if ($('.active').length && $('.active').index() < $(this).index()) {
                $('body').animate({
                    scrollTop: topPos.top - 200
                }, 600);
            } else { // the previously active accordion is below the new one, or there was no previous accordion
                $('body').animate({
                    scrollTop: topPos.top
                }, 600);
            }
            
            $('.active').removeClass('active')
                .next(allPanels).slideUp(400);
            $(this).addClass('active')
                .next(allPanels).slideDown(400);
        }
    });

});