Jquery onclick method is not working properly

I’m trying to make a search form. I want it to be like when I click in the search form opener button, the search form would show and its width would be 100%.

When I click it again the search form width would return to 0. The first one is working but when I click it back, the form is not set to width of 0.

app.js :

var header_right_search_btn =$("#header_right_search_btn");
var header_search_cont = $("#header_search_cont");
var search_box = $("#search_box");
header_right_search_btn.click(function(e){
    e.preventDefault();
    if(header_search_cont.css("width","0")){
        header_search_cont.css("width","100%")
        search_box.focus();
        header_search_cont.css("opacity","1");
        header_search_cont.css("transition","all .2s ease-in-out");
    }else if(header_search_cont.css("width","100%")){
        header_search_cont.css("width","0")
        header_search_cont.css("opacity","0");
        header_search_cont.css("transition","all .2s");

    }
    console.log("hhihihihi");

})

var search_area_die = $("#search_area_die");
search_area_die.click(function(e){
    e.preventDefault();
    header_search_cont.css("width","0")
    header_search_cont.css("opacity","0");
    header_search_cont.css("transition","all .2s");
})
//search ends



        <div id="header_search_cont" class="unstreched_search">
    <form action="" method="post" name="search_form" id="search_form" enctype="multipart/form-data">
        <button type="button" id="search_area_die"><svg id="search_die_svg" version="1.1" id="Layer_1"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
                <g>
                    <g>
                        <path
                            d="M501.333,245.333H36.417l141.792-141.792c4.167-4.167,4.167-10.917,0-15.083c-4.167-4.167-10.917-4.167-15.083,0l-160,160c-4.167,4.167-4.167,10.917,0,15.083l160,160c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125c4.167-4.167,4.167-10.917,0-15.083L36.417,266.667h464.917c5.896,0,10.667-4.771,10.667-10.667S507.229,245.333,501.333,245.333z" />
                    </g>
                </g>
            </svg></button>
        <input type="search" name="search_box" id="search_box" placeholder="Search..."><button id="searchbtn"
            name="searchbtn"><svg class="search_ico_svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
                style="enable-background:new 0 0 512 512;" xml:space="preserve">
                <g>
                    <g>
                        <path d="M508.875,493.792L353.089,338.005c32.358-35.927,52.245-83.296,52.245-135.339C405.333,90.917,314.417,0,202.667,0S0,90.917,0,202.667s90.917,202.667,202.667,202.667c52.043,0,99.411-19.887,135.339-52.245l155.786,155.786c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125C513.042,504.708,513.042,497.958,508.875,493.792zM202.667,384c-99.979,0-181.333-81.344-181.333-181.333S102.688,21.333,202.667,21.333S384,102.677,384,202.667
        S302.646,384,202.667,384z" />
                    </g>
                </g>
            </svg></button></form>
</div>

Answer

Simple way is to use addClass() and removeClass() functions instead of using .css Then for if statement you can use if($(selector).hasClass())

var header_right_search_btn =$("#header_right_search_btn");
var header_search_cont = $("#header_search_cont");
var search_box = $("#search_box");
header_right_search_btn.click(function(e){
    e.preventDefault();
    if(!header_search_cont.hasClass('strech')){  //<< if not hasClass() strech
        search_box.focus();
        header_search_cont.addClass('strech');   // addClass()
    }else{
        header_search_cont.removeClass('strech'); // removeClass()
    }
    console.log("hhihihihi");

})

var search_area_die = $("#search_area_die");
search_area_die.click(function(e){
    e.preventDefault();
    header_search_cont.removeClass('strech'); //<< removeClass()
})
//search ends

#header_search_cont{
  width : 0px;
  opacity : 0;
  transition : all .2s ease-in-out;
  overflow : hidden;
  background : red;
  padding : 10px;
  box-sizing : border-box;
}
#header_search_cont.strech{
  width : 100%;
  opacity : 1;
  transition : all .2s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header_right_search_btn">Open Search</div>
<div id="header_search_cont">
  <form>
    <input id="search_box" type="search" placeholder="search" />
    <input id="search_area_die" type="submit" value="search"/>
  </form>
</div>

Explanation:

Add/remove class strech to the element on click
Check for strech class by using .hasclass('strech')) . The ! mark means NOT so !$(selector).hasClass('strech') means if the element doesn’t have this class

Advertisement

Answer