1. HTML - прикрепить все дивы к контейнеру
<div class="wrapper">
<div class="div1">Text1</div>
<div class="div2">Text2</div>
<div class="div3">Text3</div>
<div class="div4">Text4</div>
<div class="div5">Text5</div>
</div>
2. CSS
.wrapper div{
display: none;
}
3. JS, изменения только в блоке
if(elem.tagName == 'A') {...} :
window.onload=function(){
var menuElem = document.getElementById('dropdown-menu'),
titleElem = menuElem.querySelector('.title-list');
document.onclick = function(event) {
var target = elem = event.target;
while (target != this) {
if (target == menuElem) {
if(elem.tagName == 'A') {
var name = '.div' + elem.textContent.substr(-1);
[].forEach.call(document.querySelector(".wrapper").children, function(child) {child.style.display = "none"});
document.querySelector(".wrapper").querySelector(name).style.display = "block";
}
menuElem.classList.toggle('open')
return;
}
target = target.parentNode;
}
menuElem.classList.remove('open');
}
}
Теоретические моменты:
1. Св-во display: none для скрытия/показа div'ов
2. Читаем последнюю букву в тексте ссылки - цифра, соотв номеру дива.
3. По этой цифре склеиваем имя класса дива.
4. Изменяем св-во display у элемента с этим именем класса
