JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hide-div">
    <ol>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
    </ol>
</div>

<div id="show-another-div-on-top">
RAH RAH RAH RAH
</div>
    
<a id="hide" href="#">hide</a>
<a id="show" href="#">show</a>

CSS

ol {
    list-style-type: lower-roman;
}
#show-another-div-on-top{
 padding: 100px;   
}

JavaScript

$('#show-another-div-on-top').hide();  
$('#hide').click( function() {
        $('#hide-div').hide();
        $('#show-another-div-on-top').show();
});

$('#show').click( function() {
        $('#hide-div').show();
        $('#show-another-div-on-top').hide();        
});