JSFiddle - React, Tailwind, and code Playground

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>
<p id="what"> </p>

CSS

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

/*styles*/

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

.tab {
    height: 70px;
}

#tab1 {
    background: red;
}

#tab2 {
    background: green;
}

#tab3 {
    background: yellow;
}

JavaScript

var accordion_nav = $('.accordion-nav'),
    accordion_tabs = $('.accordion').find('.tab');

accordion_tabs.hide();
accordion_tabs.first().show();

accordion_nav.on('click', 'a', function () {
    var tg_str = $(this).attr('href');
    accordion_tabs.hide();
    accordion_tabs.filter(tg_str).show();
    return false;
    $('#what').html(accordion_tabs);
});