Why JQuery hide() and show() does not work?

Question

I have a simple DIV and can't get it to hide() and show().

I guess I am doing it right but can not find what is wrong with it.

<div id="thediv" >hola</div>
<input type="button" value="click to show">This is the div content</input>

$(document).ready(function() {
    $("div#thediv").hide();
    alert($("div#thediv").hide().attr("id"));
});

$("button").click( function() {
    $("div#thediv").show();
    alert('click');
});

Also, I created a fiddle at link"http://jsfiddle.net/rt9Fc/".

Any ideas?

Answer 1

put your click handler inside document.ready and change your selector to $("input:button") -

$(document).ready(function () {
    $("div#thediv").hide();
    alert($("div#thediv").hide().attr("id"));
    $("input:button").click(function () {
        $("div#thediv").show();
        alert('click');
    });
});

Demo ---> JsFiddle