JSFiddle - React, Tailwind, and code Playground

by Tjacke

HTML

<span id="link_1">Link to Welcome</span> &nbsp; <span id="link_2">Link to About</span> 
<div id="new_link_1">  <span id="cont_1">Welcome</span> <span id="cont_11">Home</span> </div>
<div id="new_link_2">  <span id="cont_2">About</span> </div>

<hr />
<div id="c_cont_1">Welcome! This is our page.</div>
<div id="c_cont_2">About! This is a fantastic page.</div>

CSS

span{text-decoration: underline;}
span:hover{
    color: blue;
    cursor:pointer;
}
#new_link_1{ display: none; }
#new_link_2{ display: none; }
#c_cont_1{ display: none; }
#c_cont_2{ display: none; }

JavaScript

document.getElementById('link_1').addEventListener('mouseover', link_in, false);
document.getElementById('link_2').addEventListener('mouseover', link_in, false);
document.getElementById('cont_1').addEventListener('click', cont, false); 
document.getElementById('cont_2').addEventListener('click', cont, false); 

var x, y, time;

function link_in(){
    if(x){ x.style.display="none"; }
        x = document.getElementById('new_'+this.id);
        x.style.display="block";
        timer();
}
function link_out(){
    if(x){ x.style.display="none"; }
        x = document.getElementById('new_'+this.id);
        x.style.display="none";
}

function cont(){ 
    
   if(y){ y.style.display="none"; }
       y = document.getElementById('c_'+this.id)
       y.style.display="block";
     link_out();
}

function timer(){
    
    clearTimeout(time);
    time = setTimeout(function(){link_out()}, 4000);
    
    }