const buttons = document.querySelectorAll('ul.sidebar-menu > li');
const divs = document.querySelectorAll('div.services-info>div.content>div');
buttons.forEach( (btn,i) => {
btn.onclick = _ => {
for(let j = divs.length; j--;) {
const divsName = divs[j].classList[0];
divsName == btn.id ?
divs[j].classList.add('visible'):
divs[j].classList.remove('visible')
}
}
})
<nav>
<ul>
<li class="sectButton"> <a href="#one">1</a></li>
<li class="sectButton"> <a href="#two">2</a> </li>
<li class="sectButton"> <a href="#three">3</a></li>
<li class="sectButton"> <a href="#four">4</a></li>
</ul>
</nav>
<main>
<div class="main_wrapper" style="scroll-behavior: smooth;">
<section id="one">1</section>
<section id="two">2</section>
<section id="three">3</section>
<section id="four">4</section>
</div>
</main>
<div id="block">hover me</div>
function getHidden (hide , seconds , animation) {
block.setAttribute('style',`
width:100px;
height: 50px;
cursor:pointer;
background: ${hide ? "red" : "none"};
transition: ${seconds}s ${animation};
`)
}
block.addEventListener('mouseover' , () => getHidden(true,1,"ease-in") )
block.addEventListener('mouseout' , () => getHidden(false,1,"ease-out") )