show / hide | search box *

https://stackoverflow.com/questions/69978837/click-show-and-hide-search-box

 

ade a really simple example below from the snippet you gave. The only differences are inside the submitIcon.click. You just have to do how you have done for your elements searchBox and qutu by adding/removing classes. Thanks to this, you will be able to change the FontAwesome icon you want to use for the element. It is probably perfectible, like by checking if the class exists before remove or add it (in a straight cae it should not, but we never know).

 

function buttonUp(){
         var valux = $('.sb-search-input').val(); 
            valux = $.trim(valux).length;
            if(valux !== 0){
                $('.sb-search-submit').css('z-index','99');
            } else{
                $('.sb-search-input').val(''); 
                $('.sb-search-submit').css('z-index','-999');
            }
    }
    
    $(document).ready(function(){
        var submitIcon = $('.sb-icon-search');
        var submitInput = $('.sb-search-input');
        var searchBox = $('.sb-search');
        var qutu = $('.qutu');
        var isOpen = false;
        
        $(document).mouseup(function(){
            if(isOpen == true){
            submitInput.val('');
            $('.sb-search-submit').css('z-index','-999');
            submitIcon.click();
            }
        });
        
        submitIcon.mouseup(function(){
            return false;
        });
        
        searchBox.mouseup(function(){
            return false;
        });
                
        submitIcon.click(function(){
            if(isOpen == false){
                searchBox.addClass('sb-search-open');
                qutu.removeClass('noborder');
                qutu.addClass('bborder');
                searchBox.find('i.fa').removeClass('fa-search');
                searchBox.find('i.fa').addClass('fa-times');
                isOpen = true;
            } else {
                searchBox.removeClass('sb-search-open');
                qutu.removeClass('bborder');
                qutu.addClass('noborder');
                searchBox.find('i.fa').removeClass('fa-times');
                searchBox.find('i.fa').addClass('fa-search');
                isOpen = false;
            }
    });

});

 

 

body{
    margin: 40px 60px;
}
*{
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
     transition: all 0.5s;
}
form{
    display: inline-block;
}
.sb-search {
    position: relative;
    margin-top: 10px;
    width: 0%;
    min-width: 50px;
    height: 50px;
    float: right;
    overflow: hidden;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.5s;
    -webkit-backface-visibility: hidden;
}
.bborder{
    opacity: 1;
}
.noborder{
    opacity: 0;
}

.sb-search-input {
    position: absolute;
    top: 0;
    right: 0px;
    border: none;
    outline: none;
    width: 300px;
    height: 50px;
    margin: 0;
    z-index: 10;
    padding: 20px 65px 20px 20px;
    font-family: inherit;
    font-size: 20px;
    color: #2c3e50;
}
 
input[type="search"].sb-search-input {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    border:1px black solid;
}
.sb-search-input::-webkit-input-placeholder {
    color: #fff;
}
 
.sb-search-input:-moz-placeholder {
    color: #fff;
}
 
.sb-search-input::-moz-placeholder {
    color: #fff;
}
 
.sb-search-input:-ms-input-placeholder {
    color: #fff;
}

.sb-icon-search,
.sb-search-submit  {
    width: 60px;
    height: 60px;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    margin: 0;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
}

.sb-search-submit {
    background: #fff; /* IE needs this */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
    filter: alpha(opacity=0); /* IE 5-7 */
    opacity: 0;
    color: transparent;
    border: none;
    outline: none;
    z-index: -1;
}

.sb-icon-search {
    color: black;
    background: #fff;
    width: 35px;
    height: 0px;
    z-index: 90;
    margin: -5px;   
    top: 1px;
    right: 6px; 
    font-size: 22px;
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}
 
.sb-icon-search:before {
    content: "";
}

.sb-search.sb-search-open,
.no-js .sb-search {
    width: 300px;
}

.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
    background: #fff;
    color: black;
    z-index: 11;
}

.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
/*    z-index: 90;*/
}

 

 

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Search bar</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css'><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>
<body>
<!-- partial:index.partial.html -->
<div id="sb-search" class="sb-search " >
    <form>
        <input class="sb-search-input qutu noborder" onkeyup="buttonUp();" placeholder="Enter your search term..." onblur="monkey();" type="search" value="" name="search" id="search">
        <input class="sb-search-submit" type="submit"  value="">
        <span class="sb-icon-search"><i class="fa fa-search"></i></span>
    </form>
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="./script.js"></script>

</body>
</html>