Implement an event listener on the sidebar <ul> to monitor clicks on the sidebar elements.
Upon clicking a sidebar element, the listener will extract the ID of the clicked element and utilize it to generate a query selector for selecting the necessary content <div>.
Subsequently, apply the invisible class to hide all content <div> elements, remove the 'visible' class, then add the 'visible' class to the required content <div>
Instead of simply altering the existing visible content block, it's advisable to conceal everything that is not essential based on previous experiences.
The code snippet must be placed within <script> tags and inserted at the bottom of your webpage.
document.querySelector('ul.sidebar-menu').addEventListener('click',function(e){
e.preventDefault();
// The <a> element was clicked, but we need the ID from the enclosing <li> element
let clickedId = e.target.closest('li').id;
// Set all the content elements to invisible (saves trying to find the visible one)
let contentDivs = document.querySelectorAll('div.services-info>div.content>div');
contentDivs.forEach((el)=>{el.classList.remove('visible'); el.classList.add('invisible')});
// Now, using the ID from the <li>, create a query selector to find the content <div>
let targetSelector = 'div.services-info>div.content>div.'+clickedId;
// Set that element visible
document.querySelector(targetSelector).classList.add('visible');
});
.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>Our Services</h3>
<ul class="sidebar-menu">
<li id="business-card"><a href="#">Business Card Website</a></li>
<li id="landing"><a href="#">Landing Page</a></li>
<li id="market"><a href="#">Online Store</a></li>
<li id="corp"><a href="#">Corporate Site</a></li>
<li id="bitrix"><a href="#">1C Bitrix</a></li>
<li id="advertising"><a href="#">Contextual Advertising</a></li>
<li id="seo"><a href="#">SEO Optimization</a></li>
<li id="promotion"><a href="#">Social Media Promotion</a></li>
<li id="marketing"><a href="#">Content Marketing</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">Business Card Website</div>
<div class="landing invisible">Landing Page</div>
<div class="market">
<div class="services-info-title">
The online store websites expertly created by "Inter-web" possess the functionality vital for successful online trade.
</div>
<p>What our work includes:</p>
<div class="services-info-block">
<ul>
<li>+ Technical task preparation</li>
<li>+ Prototype development</li>
<li>+ Layout design</li>
<li>+ Design integration</li>
</ul>
<ul>
<li>+ Writing unique texts</li>
<li>+ Collecting semantics</li>
<li>+ Testing and launching</li>
<li>+ Web analytics integration</li>
</ul>
</div>
<div class="services-info-footer">
<a class="order" href="#">Place Order</a>
<a href="#" class="details">Learn More →</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>