Отображение элемента при клике JS & CSS

Question

Всем привет! Пытаюсь сделать так, чтобы при клике или пока стоит фокус на кнопке 'a' , он раскрывал input я его скрыл , вот мой кусок кода HTML:

<a class="link-secondary" href="#" aria-label="search">
     <i class="bi bi-search"></i>
</a>
<input type="text" name="search" placeholder="Search.." hidden>

Вот мой JS, где я меняю значение hidden на false:

const searchBtn = document.querySelector('.left-menu a[aria-label=search]'),
  searchInp = document.querySelector('.left-menu input[type=text]');
    
searchBtn.addEventListener('focus', () => {
searchInp.hidden = false;

});

Теперь как сделать так, чтобы значение hidden возвращалось для сворачивания input? Если можно в CSS , то пжлста подскажите

Answer 1

Немного подправил ваш JS чтобы пример отобразился тут.

Чтобы инпут появлялся и ищезал по клику, можно сделать так

searchInp.hidden = !searchInp.hidden;

. Чтобы скрывать инпут, после ухода фокуса с него, можно использовать событие "focusout", как-то так:

searchInp.addEventListener('focusout', () => {
searchInp.hidden = true;
})

Итого:

const searchBtn = document.querySelector('a[aria-label=search]'),
searchInp = document.querySelector('input[type=text]');
    
searchBtn.addEventListener('click', () => {
searchInp.hidden = !searchInp.hidden;
});
  searchInp.addEventListener('focusout', (e) => {
if(!e.target.value== '') {   return
}
else {
searchInp.hidden = true;

}
})

<a class="link-secondary" href="#" aria-label="search">
     <i class="bi bi-search">123</i>
</a>
<input type="text" name="search" placeholder="Search.." hidden>

БЛОГ НА HUSL

Отображение элемента при клике JS & CSS

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