jQuery Accordion - on page load, all open then close
I apologize if this has been asked before. I am using the accordion on a menu and have its default set for all to be collapsed. However when the page first loads, all of them are expanded, then they all collapse as they should be, this makes the page really jump. I am sure this is happening because the page loads....then the jQuery runs to collapse the menu, is there something I can do so this does not happen?
Code from aspx page:
- <div id="navigation">
<h3 class="first"><a href="#nogo" id="SavingsPlans">Savings Plans</a></h3>
<div class="section">
<ul>
<li style="display:none"><a href="/Pages/Retired/Savings/SavingsPlans.aspx"></a></li>
<li><asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="<%$ RouteUrl:RouteName=DailyUnitValues, masterPage=Retired %>" Text="Daily Unit Values"></asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="<%$ RouteUrl:RouteName=Forms, masterPage=Retired %>">Forms</asp:HyperLink></li>
</ul>
</div>
<h3><a href="#nogo" id="PensionPlans">Pension Plans</a></h3>
<div class="section">
<ul>
<li style="display:none"><a href="/Pages/Retired/Pension/PensionPlans.aspx"></a></li>
<li><a href="/Pages/Retired/Pension/Cola.aspx">COLA</a></li>
<li><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="<%$ RouteUrl:RouteName=PensionBrochures, fileName=TierIBrochures, masterPage=Retired %>" Text="Pension Brochures"></asp:HyperLink></li>
<li><a href="/Pages/Retired/Pension/Tier1Forms.aspx">Forms</a></li>
</ul>
</div>
<h3><a href="#nogo" id="Medicare">Medicare</a></h3>
<div class="section"></div>
<div class="last"></div>
</div>
The jquery code:
- (function ($) {
$(document).ready(function () {
$("#navigation").accordion({ active: false, navigation: true, autoHeight: false });
});
})(jQuery);