I have a list-menu .sidebar-menu and each li of this list has its own id. There is also a .services-info block, where blocks are located, one of which should appear when you click on one of the items in the .sidebar-menu that corresponds to this block. On the blocks in .services-info, I hung the .invisible class, which hides them and there is a .visible class with the display: block property.
Question: How to make it so that when you click on one of the .sidebar-menu items, the corresponding block appears and the unnecessary one disappears? For example, I clicked on the "Business card site" item and in .services-info (circled in red in the picture) the corresponding block appears (with the .business-card class) and the previous block disappears, or I clicked on the "Online store" item and it appears also the corresponding block (with class .market). and unnecessary disappears.
Site ct03638.tmweb.ru
Code jsfiddle.net/qhfs7jmb/
.invisible{
display: none;
}
.visible {
display: block;
}
<section class="services" id="services">
<div class="services-info-bg"></div>
<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 invisible">Сайт-визитка</div>
<div class="landin invisible">Landing page</div>
<div class="market">
<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">Узнать подробнее →</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
2
Answers
Add an event listener to the sidebar
<ul>
to listen for clicks on the sidebar elements.When the user clicks on a sidebar element the event listener looks for the ID of the clicked element and uses that to construct a query selector to select the required content
<div>
.Then add the
invisible
class and remove the ‘visible’ class on all the content<div>
, and finally set the ‘visible’ class on the required content<div>
You could just search for the
visible
content block and change that, but past experience has taught me to hide everything I don’t want, regardless.The code you need shoud be enclosed within
<script>
tags and added to the foot of your page.One method is to set an attribute with selected menu item id on
body
element and in CSS show the element with the same class name.The section that you want to show when clicked menu item must have the same class name as the id of
<li>
item: