Открыть и закрыть search input по 1 кнопке, чистый js

Question

Подскажите, пожалуйста, как можно выполнить проверку на чистом JS, что инпут открыт и его сразу закрывать не нужно? Мне необходимо реализовать на 1 кнопку и открытие и закрытие search input.

Код на JS

const button = document.querySelector('section');
const input = document.querySelector('#inputfield');

button.addEventListener('click', () => {
    input.classList.add('open')
});

Css

#inputfield {
    display: none;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-name: fadeIn;
    border-style: solid;
    border-color: black;
    border-width: 1px 1px 1px 1px;
  }

  .search-logo {
    cursor: pointer;
  }
  
  #inputfield.open {
    left: 62rem;
    display: block;
    position: absolute;
    top: 4rem;
  }

  #inputfield.remove {
    display: none;
}

Буду благодарен любой помощи!

Answer 1

Можно воспользоваться методом .toggle

input.classList.toggle('open')

либо вручную проверить наличие класса (.contains) и в зависимости от результата проверки добавить/удалить (.add/.remove)

if (input.classList.contains('open')) {
    input.classList.remove('open')
} else {
    input.classList.add('open')
}

БЛОГ НА HUSL

Открыть и закрыть search input по 1 кнопке, чистый js

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