Why does not .hide () work on elements in a jquery ui accordion?

advertisements

Why does .hide() not work on elements within an jquery ui accordion? It does work before the call to $("#accordion").accordion(), but not afterwards. The .show() method works fine before and after. The .toggle() method works half (only the show part).

<html>
    <head>
        <link href="jquery-ui-1.9.1.custom/css/ui-lightness/jquery-ui-1.9.1.custom.css" rel="stylesheet">
        <script src="jquery-ui-1.9.1.custom/js/jquery-1.8.2.js"></script>
        <script src="jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.js"></script>
        <script>
            $(function()
            {
                //$("#inside").hide("fade"); /* <-- this does work */
                $("#accordion").accordion();
                $("#inside").hide("fade"); /* <-- but this doesn't */
            });
        </script>
    </head>
    <body>
        <div id="accordion">
            <h3>Page 1</h3>
            <div id="page1">Blah</div>
            <h3>Page 2</h3>
            <div id="page2">
                <div id="inside">Blah too</div>
            </div>
        </div>
    </body>
</html>

Please explain not only how to solve it in another way, but more importantly why it doesn't work this way.


Based on the fact that calling hide() without the "fade" parameter, actually works (see here), I would say it has to do with the way that fade is implemented. The fade effect might be depending on the fact that the element is visible, since when you use hide("fade") when the div is showing it works (see here).