How to add a class and remove it when clicking on an object?

Question

Fonts

Here is the code with header and menu:

<div class="container">
                  <h4>Roma Tuzov</h4>
                  <i class="fas fa-align-right"></i>
                </div>
                <div class="nav-open menu-disable">
                  <div class="container">
                    <div class="contact">
                      <h3>Связаться</h3>
                      <p>
                        [email protected]
                      </p>
                    </div>
                    <div class="social">
                      <h3>Я в соц. сетях</h3>
                      <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
                      <a href="#" target="_blank"><i class="fab fa-vk"></i></a>
                      <a href="#" target="_blank"><i class="fab fa-telegram"></i></a>
                    </div>
                  </div>
                </div>

The menu is currently hidden using the menu-disable class. Here is his code:

.menu-disable {
  transform: translateY(-105%);
}

How can I make it so that when I click on i (with the fa-align-right class at the very top), the menu-disable class is removed and the menu smoothly slides out from above?

Answer 1

Well, this is what he wrote in half a minute:

var i = //получаете i
var menu = //получаете menu
i.onclick = function(e){
menu.classList.remove('menu-disable');
}

The principle is obvious, bring to mind and we will be happy to you