I have the following jquery code right now. 
This is meant to be a search function eventually, right now i got my animation, but i am yet to add an input text field to the function that i can use for my C# code for the search function. This should emerge after the border expands and dissapear when the user clicks on the html, just like the script does to the border. 

```
    $(function () {
        var search = $("#search");

        search.click(function () {
            search.attr("src", "Icons/magnifier.png").css({ "border": "2px", "border-style": "solid", "border-color": "#808080", "padding-left": "130px", "transition": "all 500ms" });
        });
        $('html').click(function (e) {
            if (e.target.id != 'search') {
                $("#search").attr("src", "Icons/magnifier2.png");
                $("#search").removeAttr('style');;
            }
        });
    })

```

I guess i have to make an appendto function, but im still unsure how to create it in such a way that when the user press enter it fires the search function. 

Right now however, i just want to create the textfield, so that it can be used in the further process. 

<https://jsfiddle.net/ymzzpLdd/>