Question: I have a search form that I need that the input text begins hidden and with a button named search, the input appears and when the input is being shown, the button named search is converted to a close button to hide again the input text.
My problem is that when the input text is hidden, the button moves to the center of my website. I need to stay in place next to the search box.

This is my code:

```
<div class="main-search-continer">
     <form action="/content/testing.html">
        <input class="inputSearch" size="41" maxlength="2048" name="q" value="">        
        <button type="button" class="js-btn-toggle_search">X Close</button>
     </form>
     <div class="clear"></div>
</div>

```

The JS:

```
$(document).on("click", "button.js-btn-toggle_search", function(){
    var $btn = $(this)
    $("input.inputSearch").toggle(0, '', function() {
        if($(this).is(":visible")) {
            $btn.text("X Close")
        } else {
            $btn.text("Search")
        }
    })
})

```

My CSS it's pretty simple:

```
input.inputSearch {
    font-size: 30px;
    width: 65%;
    margin: 0 auto;
    color: #939497;
    font-weight: 300;
    display:none;
}
div.main-search-continer {
    width: 100%;
}

```

A [fiddle](http://jsfiddle.net/ydy1jz53/) to see the behavior.

Answer: 
I don't know what you have in your css, but if you want the button to stay at the same position as when the input text is visible, then instead of setting display property to none you should set visibility: hidden. <http://www.w3schools.com/cssref/pr_class_visibility.asp>
Another way using css... not perfect but you can play with it to get the result you want.

```
.js-btn-toggle_search {
    position:absolute;
    top: 0.5em;
    left: 50%;
}

```

[jsfiddle](http://jsfiddle.net/ydy1jz53/17/)