не добавляется класс в html при нажатии на блок

Question

Логика такая: input(.search__input) спрятан за неким блоком выше него(я тут его не указывал) и при нажатии на иконку(img в .header__search) ему присваивается класс .search-show и он выплывает на нужное место. В случае, если этот класс(.search-show) уже присвоен - удаляется и инпут заезжает обратно за блок. Инпут не выезжает при нажатии, помогите понять где ошибка

let search = document.querySelector('.search__input');
let magnifier = document.querySelector('.header__search');
magnifier.addEventListener('click', () => {
  search.classList.toggle('search-show');
});

.search__input {
  width: 100%;
  background-image: url("/img/search.svg");
  background-size: 15px;
  background-position-y: center;
  background-position-x: 2px;
  background-repeat: no-repeat;
  padding: 30px 20px;
  font-size: 1.2em;
  border: none;
  height: 30px;
  position: absolute;
  margin-top: -200px;
  z-index: 1;
}

.header__search {
  &:hover {
    cursor: pointer;
  }
  img {
    width: 25px;
  }
}

.search-show {
  transition: 2s;
  margin-top: 0px;
}

<div class="header__search"><img src="img/search.svg" alt="search" title="search, magnifier icon"></div>
<input type="search" placeholder="What can we help you find?" class="search__input">

Answer 1

По сути у вас все работает, но рекомендую использовать transform т.к. анимация тогда воспроизводится на ГПУ

let search = document.querySelector('.search__input');
let magnifier = document.querySelector('.header__search');

magnifier.addEventListener('click', () => {
  search.classList.toggle('search-show');
});

.search__input {
  width: 100%;
  background-image: url("https://via.placeholder.com/468x60?text=''");
  background-repeat: no-repeat;
  padding: 30px 20px;
  font-size: 1.2em;
  border: none;
  height: 30px;
  position: absolute;
  z-index: 1;
  transform: translateY(-200px)
}

.header__search:hover {
  cursor: pointer;
}

.header__search img {
  width: 25px;
}

.search-show {
  transition: 2s;
  transform: translateY(0)
}

<div class="header__search"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/OOjs_UI_icon_search-ltr.svg/1200px-OOjs_UI_icon_search-ltr.svg.png" alt="search" title="search, magnifier icon"></div>
<input type="text" placeholder="What can we help you find?" class="search__input">

БЛОГ НА HUSL

не добавляется класс в html при нажатии на блок

Ответы (1 шт):