Есть секция .services, в которой находится .sidebar со списком-меню. При нажатии на один из пунктов меню в .sidebar справа в блоке .services-info появляется контент, который соответствует нажатому пункту, но есть проблема: когда я нажимаю на пустую область, то содержимое блока в .services-info пропадает. В чем проблема?
PS Я использую Swiper JS для полностраничного перелистывания блоков и это первый слайд-блок
Весь код
https://jsfiddle.net/1ohrf34p/
Сам сайт cn76553.tmweb.ru
Нажал на пункт меню
<div class="swiper-slide services-first-slider">
<div class="services-bg">
<div class="wrapper">
<div class="content">
<div class="sidebar">
<h3>Наши услуги</h3>
<ul class="sidebar-menu">
<li id="business-card"><a href="#">Сайт-визитка</a></li>
<li id="landing"><a href="#">Landing page</a></li>
<li id="market"><a href="#">Интернет-магазин</a></li>
<li id="corp"><a href="#">Корпоративный сайт</a></li>
<li id="bitrix"><a href="#">1C Битрикс</a></li>
<li id="advertising"><a href="#">Контекстная реклама</a></li>
<li id="seo"><a href="#">SEO оптимизация</a></li>
<li id="promotion"><a href="#">Продвижение в соц. сетях</a></li>
<li id="marketing"><a href="#">Контент-маркетинг</a></li>
</ul>
<ul class="sidebar-nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="services-info">
<div class="content">
<div class="business-card">Сайт-визитка</div>
<div class="landing invisible">Landing page</div>
<div class="market invisible">
<div class="services-info-title">
Созданные экспертами «Inter-web» сайты интернет-магазинов имеют функциональность, необходимую для успешной онлайн-торговли.
</div>
<p>Что входит в нашу работу:</p>
<div class="services-info-block">
<ul>
<li>+ Подготовка технического задания</li>
<li>+ Разработка прототипа</li>
<li>+ Верстка макета</li>
<li>+ Интеграция дизайна</li>
</ul>
<ul>
<li>+ Написание уникальных текстов</li>
<li>+ Сбор семантики</li>
<li>+ Тестирование и запуск</li>
<li>+ Подключение веб-аналитики</li>
</ul>
</div>
<div class="services-info-footer">
<a class="order" href="#">Сделать заказ</a>
<a href="#" class="details next">
<span>Узнать подробнее</span>
<div class="button-next"></div>
</a>
</div>
</div>
<div class="corp invisible">Корпоративный сайт</div>
<div class="bitrix invisible">1C Битрикс</div>
<div class="advertising invisible">Контекстная реклама</div>
<div class="seo invisible">SEO оптимизация</div>
<div class="promotion invisible">Продвижение в соц. сетях</div>
<div class="marketing invisible">Контент-маркетинг</div>
</div>
</div>
</div>
</div>
</div>
</div>
document.querySelector('ul.sidebar-menu').addEventListener("click", function(e) {
e.preventDefault();
let clickedId = e.target.parentNode.id;
let divs = document.querySelectorAll('div.services-info>div.content>div');
divs.forEach((el) => {
el.classList.remove('visible');
el.classList.add('invisible');
});
let targertEl = 'div.services-info>div.content>div.' + clickedId;
document.querySelector(targertEl).classList.add('visible');
});
