Expand Search box with click submit btn function.html

<style>
    /* Search box style */
    .search-wrap{position: absolute; right: 0; top: 15px; z-index: 1;}
    .search-wrap.search-box-expanded{z-index: 3;}
    .search-form-warp{float: left; width: 100%; position: relative;}
    .expand-btn{position: absolute; right: 0; width: 35px; height: 35px; background: transparent; z-index: 5; cursor: pointer;}
    .value-added .expand-btn{z-index: 2;}
    .input-field{position: absolute; top: 0; right: 45px; width: 200px; height: 35px; z-index: 5; overflow: hidden;}
    .search-wrap input[type="text"]{float: left; border: 1px solid #dfded8; color: #dfded8; padding: 0 10px; display: block; position: absolute; top: 0; right: -200px; width: 200px; height: 35px; margin: 0; padding: 0 10px; font-size: 18px; -webkit-backface-visibility: none; -moz-backface-visibility: none; -ms-backface-visibility: none; backface-visibility: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-transition: right 0.3s; -moz-transition: right 0.3s; -ms-transition: right 0.3s; -o-transition: right 0.3s; transition: right 0.3s;}
    .search-box-expanded.search-wrap input[type="text"]{right: 0px; -webkit-transition: right 0.3s; -moz-transition: right 0.3s; -ms-transition: right 0.3s; -o-transition: right 0.3s; transition: right 0.3s;}
    .search-wrap input[type="submit"]{float: left; width: 35px; height: 35px; background: url(../images/search-icon.png) no-repeat center center; border: none; text-indent: -99990px; cursor: pointer; position: relative; z-index: 4;}

</style>

<!-- html structure for search box -->
<div class="search-wrap">
    <form action="" method="post" class="search-form-warp">
        <div class="input-field">
            <input type="text" value="Search..." id="searchBox">
        </div>

        <input type="submit" id="submitBtn">
        <div class="expand-btn" id="expand-btn"></div>
    </form>
</div>

<script type="text/javascript">
    $('#expand-btn').click(function(){
        $('div.search-wrap').toggleClass('search-box-expanded')
    })


    // Begin input common focus and blur for value.
    $('#searchBox').keyup(function(){
        $('div.search-wrap').addClass('value-added')
    })


    $('#searchBox').blur(function(){
        if(!this.value){this.value=this.defaultValue;}
        if(this.value==this.defaultValue){
            $('div.search-wrap').removeClass('value-added')
        }
    });
    // Ends input common focus and blur for value.
</script>