javascript - Expanding search bar does not search after closing and reopening it, Jquery -

i'm creating expanding search bar.

i'm using demo base : http://codepen.io/nikhil/pen/qcygf/

the searchbar works if open it, write in input , click on button again

but if open it, write in input, close clicking outside of search bar open again; clicking on button close searchbar again. how can change code in way if close , reopen searchbar it'll search on click on button ?

html:

<div class="container"> <form class="searchbox">     <input type="search" placeholder="search......" name="search" class="searchbox-input" onkeyup="buttonup();" required>     <input type="submit" class="searchbox-submit" value="go">     <span class="searchbox-icon">go</span> </form> 

detailed tutorial on thecodeblock

css:

    body{     background:#475f77; }  .container{     width:600px;     margin:50px auto; }  .searchbox{     position:relative;     min-width:50px;     width:0%;     height:50px;     float:right;     overflow:hidden;      -webkit-transition: width 0.3s;     -moz-transition: width 0.3s;     -ms-transition: width 0.3s;     -o-transition: width 0.3s;     transition: width 0.3s; }  .searchbox-input{     top:0;     right:0;     border:0;     outline:0;     background:#dcddd8;     width:100%;     height:50px;     margin:0;     padding:0px 55px 0px 20px;     font-size:20px;     color:red; } .searchbox-input::-webkit-input-placeholder {     color: #d74b4b; } .searchbox-input:-moz-placeholder {     color: #d74b4b; } .searchbox-input::-moz-placeholder {     color: #d74b4b; } .searchbox-input:-ms-input-placeholder {     color: #d74b4b; }  .searchbox-icon, .searchbox-submit{     width:50px;     height:50px;     display:block;     position:absolute;     top:0;     font-family:verdana;     font-size:22px;     right:0;     padding:0;     margin:0;     border:0;     outline:0;     line-height:50px;     text-align:center;     cursor:pointer;     color:#dcddd8;     background:#172b3c; }    .searchbox-open{     width:100%; }  .byline{   position:absolute;   top:150px;   left:30%;   text-align:center;   font-size:18px; } .byline a{   text-decoration:none;   color: #d74b4b; } 

jquery :

  $(document).ready(function(){         var submiticon = $('.searchbox-icon');         var inputbox = $('.searchbox-input');         var searchbox = $('.searchbox');         var isopen = false;         submiticon.click(function(){             if(isopen == false){                 searchbox.addclass('searchbox-open');                 inputbox.focus();                 isopen = true;             } else {                 searchbox.removeclass('searchbox-open');                 inputbox.focusout();                 isopen = false;             }         });            submiticon.mouseup(function(){                 return false;             });         searchbox.mouseup(function(){                 return false;             });         $(document).mouseup(function(){                 if(isopen == true){                     $('.searchbox-icon').css('display','block');                     submiticon.click();                 }             });     });         function buttonup(){             var inputval = $('.searchbox-input').val();             inputval = $.trim(inputval).length;             if( inputval !== 0){                 $('.searchbox-icon').css('display','none');             } else {                 $('.searchbox-input').val('');                 $('.searchbox-icon').css('display','block');             }         } 

the code base opens , closes search bar

submiticon.click(function(){         if(isopen == false){             searchbox.addclass('searchbox-open');             inputbox.focus();             isopen = true;         } else {             searchbox.removeclass('searchbox-open');             inputbox.focusout();             isopen = false;         }     });  

i change else (search bar open) code search.