JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:300px; height:200px; background:#FFC;">
    
    <div class="blueDiv">
        <a href='#'>Click Me to Hide Blue Div and Show Green Div</a>
        <a href='#'>Click Me to Hide Blue Div 2</a>
        <a href='#'>Click Me to Hide Blue Div 3</a>
    </div>
    
    <div class="GreenDiv3"> 
        <a>Click Me to Hide Green Div and Show Blue Div Div3</a>
    </div>
    
</div>

CSS

.blueDiv {
    width:200px;
    height:100px;
    background:#09F;
}
.GreenDiv {
    width:250px;
    height:150px;
    background:#0C9;
    display:none;
}
a {
    text-decoration:none;
    cursor:pointer;
    font-size:10px;
}

JavaScript

$('a').click(function () {
    $(this).parent().hide().siblings().show();
});