How to change the appearance of the sidebar when moving click?

byMR

August 15, 2022

I want to create a sidebar that when clicked, only changes 1, the rest are gone.

For example as below:

This is when i try

This is what i want

let button = document.querySelectorAll("aside li a");

for (let i = 0; i < button.length; i++) {
  button[i].addEventListener("click", function() {
    this.classList.toggle("is-active");
  });
}

aside ul {
  position: fixed;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 190px;
  left: 355px;
}

aside li a {
  position: relative;
  display: block;
  padding: 5px 20px;
  color: #145CA6;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  text-decoration: none;
  top: 100px;
}

aside li a:hover,
aside li a.is-active {
  color: #fff;
  background-color: #145CA6;
  transition: all 1s;
}

<aside>
  <ul>
    <li><a href="#tg">Overview</a></li>
    <li><a href="#research-objective">Research</a></li>
    <li><a href="#research">Interview</a></li>
    <li><a href="#user-journey">User Journey</a></li>
    <li><a href="#user-persona">Persona</a></li>
    <li><a href="#ideation">Ideation</a></li>
    <li><a href="#wireframe">Wireframe</a></li>
    <li><a href="#final-design">Final Design</a></li>
    <li><a href="#design-system">Design System</a></li>
  </ul>
</aside>

Maybe there is another way besides creating a toogle and adding it in css? Because I’m confused about it.

Thanks 🙂

>Solution :

One solution is remove all is-active class from other buttons before add for the clicked button

let buttons = document.querySelectorAll("aside li a");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    buttons.forEach(button => button.classList.remove('is-active'));
    this.classList.add("is-active");
  });
}

aside ul {
  position: fixed;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 190px;
  left: 355px;
}

aside li a {
  position: relative;
  display: block;
  padding: 5px 20px;
  color: #145CA6;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  text-decoration: none;
  top: 100px;
}

aside li a:hover,
aside li a.is-active {
  color: #fff;
  background-color: #145CA6;
  transition: all 1s;
}

<aside>
  <ul>
    <li><a href="#tg">Overview</a></li>
    <li><a href="#research-objective">Research</a></li>
    <li><a href="#research">Interview</a></li>
    <li><a href="#user-journey">User Journey</a></li>
    <li><a href="#user-persona">Persona</a></li>
    <li><a href="#ideation">Ideation</a></li>
    <li><a href="#wireframe">Wireframe</a></li>
    <li><a href="#final-design">Final Design</a></li>
    <li><a href="#design-system">Design System</a></li>
  </ul>
</aside>