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 usehide("fade")when the div is showing it works (see here).