Как можно вернуть скрытый блок с помощью JS?

Question

[LosTinCode]

Приветствую!

На странице есть блок, скрытый с помощью свойства transform: translateX(-100%);
После нажатия кнопки "Загрузить", блок должен выезжать, при нажатие на стрелку, снова уезжать

Знания крошечные, не понимаю как грамотно наладить контакт с DOM элементами.

P.S Буду благодарен хотя бы за статью, чтобы понять, как это можно сделать!

Answer 1

[Beliyadm]

Банально так

Comments

[LosTinCode]

Спасибо! Всё работает, блок возвращается на место, но есть ещё одна загвоздка у меня, после того, как выезжает блок, там есть стрелка и уже на неё нужно повесить событие, чтоб при клике на неё, блок уезжал обратно?
Аналогичные действия получается провести нужно?

[Beliyadm]

LosTinCode, LosTinCode, Сейчас есть одна основная стрелка, переключает туда\сюда
Обновил пример, просто добавил еще одну кнопку, которая убирает активность.
Не самый оптимальный вариант, но как демонстрация работы с элементами пойдет.

[LosTinCode]

Beliyadm, Спасибо большое! Пока твоим способом воспользуюсь
У меня пока вот что пока получается, alert внутри отрабатывает, уже радует, но вот мой функционал - нет:

<button class="server-host__button-loading" id="open-operating">
       Загрузить
</button>

       <div class="operating__system" id="open">
            <div class="operating-system__title">
                <div class="operating-system-title__arrows">
                    <a href="#" class="arrows__link">
                        <img src="img/operating_system_selection/Arrow.svg" alt="" class="arrows">
                    </a>
                </div>
                <h1 class="title">Выберете операционную систему</h1>
            </div>
            <div class="operating-system__selection">
                <img src="img/operating_system_selection/Windows.svg" alt="" class="operating-system__picture">
                <img src="img/operating_system_selection/Mac Client.svg" alt="" class="operating-system__picture">
                <img src="img/operating_system_selection/Linux.svg" alt="" class="operating-system__picture">
                <img src="img/operating_system_selection/Chrome.svg" alt="" class="operating-system__picture">
            </div>
       </div>

.operating__system {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateX(-100%);
}
#open {
    transform: translateX(0);
}

document.addEventListener('DOMContentLoaded', (e) => {
  document.getElementById('open-operating').addEventListener('click', (e) => {
      document.getElementsByClassName('operating__system').classList.add('.open')
  })
})

[Beliyadm]

LosTinCode,

document.addEventListener('DOMContentLoaded', (e) => {
  document.getElementById('open-operating').addEventListener('click', (e) => {
      document.querySelector('.operating__system').classList.add('open')  // сравните с своей строкой
  })
})

[LosTinCode]

Beliyadm, Спасибо тебе огромное вдвойне!!!