JS Vertical Menu V1

With content popping out to the right using visibility (not display: none)

by akmiecik

HTML

<div id="intro" class="fl-row fl-row-full-width fl-row-bg-color fl-node-kl5cn7jwgh9q" data-node="kl5cn7jwgh9q"><div class="fl-drop-target fl-row-drop-target ui-sortable" style=""></div>
	<div class="fl-row-content-wrap">
						<div class="fl-row-content fl-row-fixed-width fl-node-content">
		
<div class="fl-col-group fl-node-ha7u98b2c4k0 fl-col-group-equal-height fl-col-group-align-top" data-node="ha7u98b2c4k0">
			<div class="fl-col fl-node-uxc2rknmh0di fl-col-small column" data-node="uxc2rknmh0di" style="width: 23.42%;">
	<div class="fl-col-content fl-node-content ui-sortable">
	<div id="the_mission" class="fl-module fl-module-rich-text fl-node-yb9upfxewvrc vertical_menu" data-node="yb9upfxewvrc" data-parent="uxc2rknmh0di" data-type="rich-text" data-name="Text Editor">
	<div class="fl-module-content fl-node-content">
		<div class="fl-rich-text">
	<h3>The Mission</h3>
</div>
	</div>
</div>
<div id="biz_models" class="fl-module fl-module-rich-text fl-node-cf81jtm6uz92 vertical_menu" data-node="cf81jtm6uz92" data-parent="uxc2rknmh0di" data-type="rich-text" data-name="Text Editor">
	<div class="fl-module-content fl-node-content">
		<div class="fl-rich-text">
	<h3>Business Models</h3>
</div>
	</div>
</div>
<div id="services" class="fl-module fl-module-rich-text fl-node-ejryoctv4dk6 vertical_menu" data-node="ejryoctv4dk6" data-parent="uxc2rknmh0di" data-type="rich-text" data-name="Text Editor">
	<div class="fl-module-content fl-node-content">
		<div class="fl-rich-text">
	<h3 class="fl-slide-title">Services</h3>
</div>
	</div>
</div>
<div id="the_chart" class="fl-module fl-module-rich-text fl-node-ef56haprn9vu vertical_menu" data-node="ef56haprn9vu" data-parent="uxc2rknmh0di" data-type="rich-text" data-name="Text Editor">
	<div class="fl-module-content fl-node-content">
		<div class="fl-rich-text">
	<h3>A Financial Hedge for Liquid Asphalt</h3>
</div>
	</div>
</div>
<div id="the_story" class="fl-module fl-module-rich-text fl-node-c5mb604ajlpo vertical_menu"...

CSS

.visibility {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 21%;
  width: 75%;
  }
.fl-col.fl-node-uxc2rknmh0di.fl-col-small.column {
    width: 20%;
}

JavaScript

jQuery(document).ready(function($) {
	document.getElementById('the_mission').addEventListener('mouseover', function handleMouseOver() {
    document.getElementById('the_mission_copy').style.visibility = 'visible';
});
	document.getElementById('the_mission_copy').addEventListener('mouseover', function handleMouseOver() {
    document.getElementById('the_mission_copy').style.visibility = 'visible';
});	

document.getElementById('the_mission').addEventListener('mouseout', function handleMouseOut() {
 document.getElementById('the_mission_copy').style.visibility = 'hidden';
});
	
	document.getElementById('biz_models').addEventListener('mouseover', function handleMouseOver() {
    document.getElementById('biz_models_copy').style.visibility = 'visible';
});
	document.getElementById('biz_models_copy').addEventListener('mouseover', function handleMouseOver() {
    document.getElementById('biz_models_copy').style.visibility = 'visible';
});	

document.getElementById('biz_models').addEventListener('mouseout', function handleMouseOut() {
 document.getElementById('biz_models_copy').style.visibility = 'hidden';
});	
	
	document.getElementById('services').addEventListener('mouseover', function handleMouseOver() {
    document.getElementById('services_copy').style.visibility = 'visible';
});
	document.getElementById('services_copy').addEventListener('mouseover', function handleMouseOver() {
    document.getElementById('services_copy').style.visibility = 'visible';
});	

document.getElementById('services').addEventListener('mouseout', function handleMouseOut() {
 document.getElementById('services_copy').style.visibility = 'hidden';
});	
	
	document.getElementById('the_chart').addEventListener('mouseover', function handleMouseOver() {
    document.getElementById('the_chart_copy').style.visibility = 'visible';
});
	document.getElementById('the_chart_copy').addEventListener('mouseover', function handleMouseOver() {
    document.getElementById('the_chart_copy').style.visibility =...