jQuery hide/show doesn't seem to work - am I doing something wrong

Question

I am trying to show an element (which is a table, but I am using it as a div) when a submit button is clicked.

It doesn't seem to work. And I don't think that's because of bad CSS Karma acquired by using tables for layout.

Code is as follows:

$(document).ready(function() {
    $("#object-created-panel").hide();       
    $("#create-object-btn").click(
    function() { 
        $("#object-created-panel").show(""); 
        } 
    );   
});

Hopefully that is enough code to show what the error is (if not I will put in the code for the tables as well) the Submit button's id is: create-object-btn

Answer 1

Why do you use show("") instead of show()?

jQuery documentation on show()

Answer 2

Three steps:

1. Try to change show("") to show()
2. Check the selector work correct e.g. no object id 'object-created-panel'
3. Use Firebug to detect the javascript error

http://getfirebug.com/

Answer 3

Stick return:false at the end of the click function to stop it posting back

$(document).ready(function() {
    $("#object-created-panel").hide();                                          
    $("#create-object-btn").click(
        function() { 
            $("#object-created-panel").show(""); 
            return: false;
        } 
    );          
});