Разверните панель поиска с помощью значка поиска, а также покажите значок закрытия при нажатии с помощью Javascript. ⇐ CSS

[Anonymous]

I am trying to open the expanded search bar with a search icon as well as a close icon on click using javascript. Here I am attaching my code. Your help will be appreciated in advance. I am also attaching the image so it can be understood very well. My code is on hover but I want to make it on click.





//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 = ""; } }); .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;} }


Источник: https://stackoverflow.com/questions/602 ... sing-javas