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?

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();});