Gsyfuy

How to have a search icon in the place of search box in the header, once the search icon is clicked the search box has to drop down, can some one help me how to do it

Example: Default magento search form : only required part shown in example, in phtml only update the attribute of elements

Form Element add extra class = searchbox

Form Input search box add extra class = searchbox-input & onkeyup=buttonUp()

Form Submit button extra class = searchbox-submit

And Next to submit button add a span element

<span class="searchbox-icon">Find</span>

<form class="form minisearch searchbox" id="search_mini_form" ...>

        <div class="field search">

            <label class="label" ... >

                <span>Search</span>

            </label>

            <div class="control">

                <input id="search" type="text" ... class="input-text searchbox-input" onkeyup="buttonUp();">



            </div>

        </div>

        <div class="actions">

            <button type="submit" class="action search  searchbox-submit" >

                <span>Go</span>  

            </button>



            <span class="searchbox-icon">Find</span>



        </div>

    </form>

As your required for mobile only so add css in mobile media query that is below 768px

.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%;

}



.label {

   border: 0;

    clip: rect(0, 0, 0, 0);

    height: 1px;

    margin: -1px;

    overflow: hidden;

    padding: 0;

    position: absolute;

    width: 1px;

}

As your required for mobile only so trigger js in mobile below 768px only

  $(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');

            }

    }

Note : It just an example to achieve your output, update css and js per your need.