I have an accordion which i am trying to activate on page load, and the .activate function doesn't appear to be working. can someone show me how i'm implementing it incorrectly?
JavaScript: $(document).ready(function() { $('#childnav').accordion({ autoheight: false, header: '.toggle', event: 'click', alwaysOpen: true, active: false }); $(".toggle").activate(0); }); HTML: <ul id="childnav"> <li id="childnav_about"> <div style="width:277px;height:5px;background:#014F75;"></div> <a href="#" class="toggle"><span>About Us</span></a> <ul class="childnav_sub"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </li> <li id="childnav_homes"> <img src="/images/childnav_spacer.jpg" alt="" /> <a href="#" class="toggle"><span>New Homes</span></a> <ul class="childnav_sub"> <li><a href="#">another link</a></li> <li><a href="#">another link</a></li> </ul> </li> <li id="childnav_community"> <img src="/images/childnav_spacer.jpg" alt="" /> <a href="#" class="toggle"><span>The Community</span></a> <ul class="childnav_sub"> <li><a href="#">Arial PhotoGraph</a></li> <li><a href="#">Amenities</a></li> <li><a href="#">Schools</a></li> <li><a href="#">Utilities</a></li> </ul> </li> <li id="childnav_news"> <img src="/images/childnav_spacer.jpg" alt="" /> <a href="#" class="toggle"><span>News & Events</span></a> <ul class="childnav_sub"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </li> <li id="childnav_contact"> <img src="/images/childnav_spacer.jpg" alt="" /> <a href="#" class="toggle"><span>Contact Us</span></a> <ul class="childnav_sub"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 1</a></li> </ul> </li> </ul>