JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="accordion-box">
    <ol class="accordion-nav h-list">
        <li><a href="#tab1">title1</a></li>
        <li><a href="#tab2">title2</a></li>
        <li><a href="#tab3">title3</a></li>
    </ol>
    
    <ol class="accordion">
        <li class="tab" id="tab1"></li>
        <li class="tab" id="tab2"></li>
        <li class="tab" id="tab3"></li>
    </ol>
</div>

CSS

/*class*/
.h-list li{
    display: inline-block;
    vertical-align: top;
}

/*styles*/

.accordion-box {
    /*margins so we can see the scroll thing happening*/
    margin: 50px 0 900px;
}

.accordion {
    position: relative;
}

.tab {
    position: absolute;
    top: 0; left: 0;
    height: 50px;
    width: 100%;
}

.tab:target {
    z-index: 2;
}

#tab1 {
    background: red;
    z-index: 1;
}

#tab2 {
    background: green;
}

#tab3 {
    background: yellow;
}

JavaScript

var html = $('html'),
    y_pos,
    scrollaroo = function scrollaroo() {
        window.scrollTo(0, y_pos);
    };

$('.accordion-nav a').on('click', function (e) {
   y_pos = self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop;
   setTimeout(scrollaroo, 1);
});