html - Expand Searchbar with Search icon as well as show close icon onclick using Javascript

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;}
    }

<div class="custom-search">
                            <div class="cell-wrapper">
                                <input required="" name="q" placeholder="Blue Book" class="form-control" id="express-form-typeahead"  type="search">
                                <button class="search-btn" type="submit"><span class="icon"></span></button>
                                <div class="close-search" id="closeSearch"></div>
                            </div>
                        </div>

//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;}
    }

<div class="custom-search">
                            <div class="cell-wrapper">
                                <input required="" name="q" placeholder="Blue Book" class="form-control" id="express-form-typeahead"  type="search">
                                <button class="search-btn" type="submit"><span class="icon"></span></button>
                                <div class="close-search" id="closeSearch"></div>
                            </div>
                        </div>

Share Improve this question edited Feb 17, 2020 at 11:36 asked Feb 17, 2020 at 6:22 Revti Shah 6401 gold badge5 silver badges16 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 0

$(".icon2").click(function(){
  $(this).val('');
})

.box{
	float: right;
}
.container-2{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

.container-2 input#search::placeholder{
  color: #0BA1F5 !important;
}

.container-2 input#search{
  width: 50px;
  height: 50px;
  border-bottom:2px #0BA1F5 solid !important;
  background: #ffffff;
  border: none;
  font-size: 11pt;
  float: right;
  color: #b4b4b4;
  padding-left: 35px;
 
  -webkit-transition: width .55s ease;
  -moz-transition: width .55s ease;
  -ms-transition: width .55s ease;
  -o-transition: width .55s ease;
  transition: width .55s ease;
}

.container-2 input#search::-webkit-input-placeholder {
   color: #65737e;
}
 
.container-2 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}
 
.container-2 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}
 
.container-2 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

.container-2 .icon{
  position: absolute;
  top: 50%;
  right:20px;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
   -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.container-2 input#search:focus, .container-2 input#search:active{
  outline:none;
  width: 300px;
}
 
.container-2:hover input#search{
width: 300px;
}
 
.container-2:hover .icon{
  color: #93a2ad;
  right:280px;
}

.container-2 .icon2{
  display:none;
  position:absolute;
  right:0px;
  top: 18px;
  cursor:pointer;
     -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.container-2:hover .icon2{
display:block;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
	<div class="container-2">
	    <span class="icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3/2000/svg" data-svg="search-icon"><circle fill="none" stroke="#0BA1F5" stroke-width="2" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#0BA1F5" stroke-width="2" d="M14,14 L18,18 L14,14 Z"></path></svg></span>
	    <input type="search" id="search" placeholder="Search..." />
  <svg width="16" height="16" fill="#0BA1F5" class="icon2" version="1.1" id="Layer_1" xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/1999/xlink" x="0px" y="0px"
     viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;" xml:space="preserve">
  <g>
    <g>
      <path d="M300.188,246L484.14,62.04c5.06-5.064,7.852-11.82,7.86-19.024c0-7.208-2.792-13.972-7.86-19.028L468.02,7.872
        c-5.068-5.076-11.824-7.856-19.036-7.856c-7.2,0-13.956,2.78-19.024,7.856L246.008,191.82L62.048,7.872
        c-5.06-5.076-11.82-7.856-19.028-7.856c-7.2,0-13.96,2.78-19.02,7.856L7.872,23.988c-10.496,10.496-10.496,27.568,0,38.052
        L191.828,246L7.872,429.952c-5.064,5.072-7.852,11.828-7.852,19.032c0,7.204,2.788,13.96,7.852,19.028l16.124,16.116
        c5.06,5.072,11.824,7.856,19.02,7.856c7.208,0,13.968-2.784,19.028-7.856l183.96-183.952l183.952,183.952
        c5.068,5.072,11.824,7.856,19.024,7.856h0.008c7.204,0,13.96-2.784,19.028-7.856l16.12-16.116
        c5.06-5.064,7.852-11.824,7.852-19.028c0-7.204-2.792-13.96-7.852-19.028L300.188,246z"/>
    </g>
  </g>
  </svg>

	</div>
</div>

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("searchBox").addEventListener("click", function(event) {
    arr = this.className.split(" ");
    if (arr.indexOf("active") == -1) {
      this.className += " active";
    }
    this.getElementsByTagName("INPUT")[0].focus();
  });

  document.getElementById("searchBox").getElementsByClassName("search")[0].addEventListener("click", function(event) {
    var parent = this.parentElement; //searchBox element;
    var arr = parent.className.split(" ");
    if (arr.indexOf("active") != -1) {
      var input = parent.getElementsByTagName("INPUT")[0];
      input.value = "";
      var classList = parent.className;
      classList = classList.replace(/\bactive\b/g, "").trim();
      parent.className = classList;
      event.preventDefault();
      event.stopPropagation();
      event.stopImmediatePropagation();
    }
  });
}, false);

.search-container {
  position: absolute;
  top: 25px;
  right: 25px;
  display: inline-block;
}

.search-container .search {
  transition: all 1s;
  z-index: 4;
  position: relative;
  display: inline-block;
  height: 50px;
  width: 50px;
  vertical-align: middle;
  right: -55px;
}

.search-container .search:hover {
  cursor: pointer;
}

.search-container .search::before {
  content: "";
  position: absolute;
  top: 36px;
  right: 0;
  bottom: 0;
  left: 28px;
  width: 12px;
  height: 2px;
  background: #ccc;
  transform: rotate(45deg);
  transition: all .5s;
}

.search-container .search::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  left: 8px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid #ccc;
  transition: all .5s;
}

.search-container input {
  width: 50px;
  height: 50px;
  outline: none;
  border-bottom: 1px solid #ccc;
  color: #ccc;
  padding: 0;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  transition: all 1s;
  opacity: 0;
  z-index: 5;
  font-weight: bolder;
  letter-spacing: 0.1em;
  box-sizing: border-box;
}

.search-container input:hover {
  cursor: pointer;
}

.search-container.active input {
  width: 300px;
  opacity: 1;
  cursor: text;
  padding: 0 0 0 50px;
}

.search-container .close {
  transition: all 1s;
  z-index: 4;
  position: relative;
  display: inline-block;
  height: 50px;
  width: 50px;
  vertical-align: middle;
  right: 55px;
  visibility: hidden;
}

.search-container.active input~.close {
  right: 55px;
  z-index: 6;
  visibility: visible;
}

.search-container.active input~.close::before {
  content: "";
  top: 25px;
  left: 15px;
  width: 20px;
  position: absolute;
  height: 2px;
  background: #ccc;
  transform: rotate(45deg);
  transition: all .5s;
}

.search-container.active input~.close::after {
  content: "";
  top: 25px;
  left: 15px;
  width: 20px;
  height: 2px;
  background: #ccc;
  transform: rotate(-45deg);
  position: absolute;
  transition: all .5s;
}

.search-container input::placeholder {
  color: #898989;
  opacity: 0.5;
  font-weight: bolder;
}

.search-container .input-box {
  vertical-align: middle;
  display: inline-block;
}

<div id="searchBox" class="search-container">
  <div class="search"></div>
  <div class="input-box">
    <input type="text" placeholder="Search...">
    <div class="close"></div>
  </div>
</div>

If your code snippet was able to work, I could give you the answer. But now I can guide you only. In such cases you better to use a toggle class. When user clicks on element, toggle class will be added and when click out it will be removed.

var searchBar = document.getElementById("searchBar");
        searchBar.addEventListener('click' , function(){ 
            searchBar.classList.add("toggleClass");
        });
        window.addEventListener('mouseup', e =>{
            
                if(e.target != searchBar && e.target.parentNode != searchBar )
                {
                    searchBar.classList.remove("toggleClass");
                }                  
        });

.searchBar{
  width: 100px;
  background-color: silver;
  height: 50px;
  display: inline-block;
  transition-duration: 0.5s;
}

.searchBar .icon{
display: none;
}

.toggleClass{
  width: 300px;
  }
  
  .toggleClass .icon{
  display: block;
  }

<div id="searchBar" class="searchBar">
  <span class="icon">icon</span>
</div>

Programmer puzzle solving

html - Expand Searchbar with Search icon as well as show close icon onclick using Javascript - Stack Overflow

3 Answers 3

Articles related to this article

comment list (0)