Hiding a table on clicking the text inside h1 element

I want to show a table on page load but want to show/hide in an expand/collapse manner.

I am unable to do so using the following code:

$(window).load(function () {
    $(document).ready(function开发者_JS百科 () {     
        $("table").hide();
        //toggle the componenet with class msg_body
        $("h1").click(function () {
            $(this).next("table").slideToggle(500);
        });
    });
});

Please suggest how this can be achieved? Thanks.

if you want to show the page on load why are you hiding it $("table").hide();

you can use

   $(document).ready(function () {

        //toggle the componenet with class msg_body

        $("h1").click(function () {

            $("table").slideToggle(500);

        });
    });

$(function() {
  $("table").hide();
});

You don't need to put the jQuery ready inside of the window.load, removing that wrapper should fix it.