JQuery - Slide Toggle automatically open the first item?

Question

I have aJQuery accordian using the following JS.

function initMenu() {
  $('#accordion ul').hide();
  $('#accordion li a').click(
    function() {
        $(this).next().slideToggle('normal');
      }
    );
  }
$(document).ready(function() {initMenu();});

And the following HTML

 <ul id="accordion">
            <li><a class="firstheading" href="#">Making words work</a>
                <ul class="panelContent">
                    <li>
                        <p>IPSUM</p>
                    </li>
                </ul>
            </li>
            <li><a class="heading" href="#">Full business-writing services</a>
                <ul class="panelContent">
                    <li>
                        <p>IPSUM<p>
                    </li>
                </ul>
            </li>
        </ul>

Can anyone tell me how to ensure the first item is opened when the page loads?

Cheers

Steve

Answer 1

You can use the gt selector to specify the ul's with an index greater than zero, so every ul except the first.

Demo here

function initMenu() {
  $('#accordion ul:gt(0)').hide();
  $('#accordion li a').click(
    function() {
        $(this).next().slideToggle('normal');
      }
    );
  }
$(document).ready(function() {initMenu();});

Answer 2

It should be opening automatically, but you can open up accordion pieces programmatically like so:

.accordion( 'activate' , index )

so to open up the first section, you would do

$('#accordion').accordion('activate',0);

You could put that in your document ready function. Note that a selector can also be used in place of the number, which represents each section from 0 onwards.

Source