JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="menu"><a href="#" onmouseover="tog('it1');">Item 1</a><a href="#" onmouseover="tog('it2');">Item 2</a><a href="#" onmouseover="tog('it3');">Item 3</a></div>

<div class="icont">
<div class="items" id="it1" onmouseout="tog2('it1');">Items 1</div>
<div class="items" id="it2" onmouseout="tog2('it2');">Items 2</div>
<div class="items" id="it3" onmouseout="tog2('it3');">Items 3</div>
</div>


<div class="page">Page</div>

CSS

body {margin:0;}
.menu {max-width:400px;margin:auto;background-color:#ccc;padding:10px;border-bottom:2px solid #999;}
.page {max-width:400px;margin:auto;background-color:#ddd;padding:10px;height:400px;}
.icont {position:absolute;width:100%;}
.items {display:none;}
.items2 {background-color:#aaa;max-width:400px;margin:auto;padding:10px;display:block;}

JavaScript

function tog(id) {

var divs = document.getElementsByClassName("items2");

for(var i=0;i<divs.length;i++) {
divs[i].className = "items";
}

var it = document.getElementById(id);

	if(it.className == "items"){
		it.className = "items2";
	} else {
		it.className = "items";
	}
  

}	


function tog2(id) {

var it = document.getElementById(id);
it.className = "items";

}