jQuery accordion - Open item on page load

Question

I have a real simple jQuery accordion based on http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/

Everything works fine but I would like it to automatically have the first item in the list open when the page loads

I have everything in a jsfiddle at http://jsfiddle.net/HJ8c7/

Can anyone help?

Answer 1

You can do that pretty easy by triggering the click event. Based on your jsfiddle code:

jQuery('div.accordionButton').click(function() {
    jQuery('div.accordionContent').slideUp('normal');    
    jQuery(this).next().slideDown('normal');
});

jQuery("div.accordionContent").hide();
jQuery('div.accordionButton:eq(0)').trigger('click');

Apart from you original question, you may want to use jquery differently so that you do not have to use "jQuery" all the time. It is common to bind the jquery object to the $ variable:

jQuery(function($) {
     $('div.accordionContent:eq(0)').trigger('click');
});

Answer 2

Do:

$( "#accordion" ).accordion( "option", "active", 0 );

It will open the first element.

Answer 3

you can just do it by jquery

$(document).ready(function() {
 $(".accordionButton:first").trigger("click");
});

js fiddle demo live

jquery trigger mathod is used for trigger the event

.trigger( eventType [, extraParameters] )

Ref: Jquery trigger