Разверните SearchBar с значком поиска, а также покажите значок Close Onclick, используя JavaScript ⇐ CSS

[Anonymous]

Я пытаюсь открыть расширенную строку поиска со значком поиска, а также значок закрытия на клике с помощью JavaScript. Здесь я прикрепляю свой код. Ваша помощь будет оценена заранее. Я также прикрепляю изображение, поэтому его можно понять очень хорошо. Мой код находится на парящем, но я хочу сделать это на щелчке. />

Код: Выделить всё

//Search Bar
var searchBar = document.getElementById("express-form-typeahead");
searchBar.addEventListener('click' , function(){
var closeSearch = document.getElementById("closeSearch");
closeSearch.style.display = "block";
});
window.addEventListener('mouseup', e =>{
//alert(e);
if(e.target != searchBar && e.target.parentNode != searchBar )
{
var closeSearch = document.getElementById("closeSearch");
closeSearch.style.display = "";
}
});< /code>
.custom-search{position: relative;right:-12px;}
#express-form-typeahead{background-color:transparent;background-image:url('../images/search.svg');background-position:5px center;background-repeat:no-repeat;background-size:15px;border:none;cursor:pointer;height:30px;padding:0 0 0 34px;position:relative;-webkit-transition:width 1.1s ease, background 1.1s ease;transition:width 1.1s ease, background 1.1s ease;width:0;}
.close-search{display:none;-webkit-animation: fadeEffect1 2s;animation: fadeEffect1 2s;
position: absolute;top:9px;right:9px;background-image: url('../images/close-icon-grey.png');width: 15px;
height: 15px;background-repeat: no-repeat;background-size: 15px;}
#express-form-typeahead:focus{background-color:#fff;border-bottom:1px solid #e7e7e7;cursor:text;outline:0;width:200px;border-radius: 0;}
.search-btn{display:none;}
input[type="search"]{-webkit-appearance:textfield;}
/* Fade in tabs */
@-webkit-keyframes fadeEffect1 {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect1 {
from {opacity: 0;}
to {opacity: 1;}
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/602 ... sing-javas