Применение DIV в HTML?

Question

[Epic18]

Имеется вот такой макет, как сделать так что бы при выборе меню в левую колонку загружалось необходимая информация.
Вроде делается это с помощью "DIV" блоков, но у меня нету примеров.

<header>   <!--Шапка и меню -->
			<ul id="navbar">
				<li> <a href="#" >Меню 1 </a> </li>
				<li> <a href="#" >Меню 2 </a> </li>
				<li> <a href="#" >Меню 3 </a> </li>
			</ul>	
    </header>
	   
	   
		<div id="leftColumn">
			
			<!--Меню 1 -->
			<div id="me1"> 
			
			</div>
			
			
			<!--Меню 2 -->
			<div id="me2">
			
			</div>
			
			
			<!--Меню 3 -->
			<div id="me3"> 
			
			</div>
			
		</div>

Answer 1

[Epic18]

Вопрос решен. Применил javascript.

function openbox(id){
			var container = document.querySelector("#leftColumn");
			var elements = container.querySelectorAll("div.element > div");
				for(var i=0; i<elements.length; i++){
					elements[i].style.display = (elements[i].id == id) ? 'block' : 'none' ;
				}
		}

Answer 2

[Robert-critical-thoughts]

Это называется tabs(табы) - вот вам пример с codepen, в нем показана техническая реализация без js. На codepen примеров куча.
Пример - Link

Comments

[Epic18]

Я сделал решение через javascript и "div"

function openbox(id){
	display = document.getElementById(id).style.display;
		if(display == 'none'){
			document.getElementById(id).style.display='block';
					if(document.getElementById(id) != document.getElementById("me1")){document.getElementById("me1").style.display='none';}
					if(document.getElementById(id) != document.getElementById("me2")){document.getElementById("me2").style.display='none';}
					if(document.getElementById(id) != document.getElementById("me3")){document.getElementById("me3").style.display='none';}
					
			}
	
		}

Теперь нужно оптимизировать три последние кода с if else, она как бы закрывает те блоки которые в данный момент не выбраны. Как сделать это попроще? Может сделать через перебор потомков leftCollum в который и помещены эти me1 me 2 me3?