title: Expand Searchbar with Search icon as well as show close icon onclick using Javascript
body: <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/7jXNh.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7jXNh.gif" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//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 =&gt;{
              //alert(e);
                  if(e.target != searchBar &amp;&amp; e.target.parentNode != searchBar )
                  {
                      var closeSearch = document.getElementById("closeSearch");
                      closeSearch.style.display = "";
                  }                  
          });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><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></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="custom-search"&gt;
                              &lt;div class="cell-wrapper"&gt;
                                  &lt;input required="" name="q" placeholder="Blue Book" class="form-control" id="express-form-typeahead"  type="search"&gt;
                                  &lt;button class="search-btn" type="submit"&gt;&lt;span class="icon"&gt;&lt;/span&gt;&lt;/button&gt;
                                  &lt;div class="close-search" id="closeSearch"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>