Search bar appears when scope icon or button is clicked in jQuery / 제이쿼리로 검색아이콘 눌렀을 때 검색바 나타나게 하기

<div class="searchingbox">
        <input type="text">
        <a class="closebtn">X</a>
</div>
<button>search</button>


<style>
.searchingbox{width: 0px; position: relative; float: left; display: none;}
.closebtn {position:absolute; top:0; right:10px;}
button {float:left;}
</style>


<script>
$(document).ready(function(){
     $("button").click(function(){
         $(".searchingbox").css({display:"block"});
        $(".searchingbox").animate({width: "180px"},500);      
    });
    $(".closebtn").click(function(){
        if($(".searchingbox").css('width')=="180px")
        $(".searchingbox").animate({width: "0px"},500,function(){
            $(".searchingbox").css({display:"none"});
        });
     });
 });
</script>