CODEWITHSUNDEEP
jquery-uihideaccordion
Bert Regelink
Bert Regelink

Reputation: 2716

Why does .hide() not work on elements within an jquery ui accordion?

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.

Upvotes: 1

Views: 2033

Answers (2)

cjc343
cjc343

Reputation: 3765

This happens because of accordion's use of hide. The first time a panel is shown, the contents are shown as well, even if they were previously hidden, so if the panel is not open when you hide the contents, they will appear when you first select that panel. See juan.facorro's explanation as it provides a correct explanation as to what's not working.

Here's one possible start of a workaround by showing the panel containing #inside initially, hiding it, then showing the first panel instead: http://jsfiddle.net/cjc343/KuJJm/2/

Upvotes: 0

juan.facorro
juan.facorro

Reputation: 9930

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).

Upvotes: 2

Related Questions