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: 
**[jsFiddle demo](http://jsfiddle.net/roXon/5416bjap/4/)**

The jQuery `toggle()` Method operates over the `display` property, which, when set to `display:none;` basically hides your element from the document flow. 

Instead use CSS **`visibility` hidden / visible** accessing it via `.css()` method.

Here's a code example

```
$(document).on("click", "button.js-btn-toggle_search", function(){
    var $input = $("input.inputSearch");
    var tog = $input.css("visibility") === "visible";
    $input.css({visibility: tog ? "hidden" : "visible"});
    $(this).text(tog ? "Search" : "X Close");
});

```

Or also using `^ XOR` as 1/0 toggler

```
$(document).on("click", "button.js-btn-toggle_search", function(){
    var tog = this.tog^=1;   // 1/0 Toggler // or use this.dataset.tog^=1;
    $("input.inputSearch").css({visibility: tog?"hidden":"visible"});
    $(this).text(tog?"Search":"X Close");
});

```

<http://www.w3.org/wiki/CSS/Properties/visibility>
<https://developer.mozilla.org/en/docs/Web/CSS/visibility>
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/)