Question

I am using the below code to display an accordion menu using jQuery.

Currently each item is closed (not expanded) when the page loads. I would like the first item in the list to already be expanded when the page loads. Is this possible to set somehow using jQuery?

Unfortunately I cannot change the HTML markup as it is being generated dynamically.

Here’s my HTML:

<ul id="menu-classes" class="menu">
<li>
    <h3><a>Item 1</a></h3>
    <div class="sub">
        <p>Some blah blah here.</p>
        <a href="#"><span class="readmorehomebox">read more ›</span></a>
    </div>
</li>
<li>
    <h3><a>Item 2</a></h3>
    <div class="sub">
        <p>Some blah blah here.</p>
        <a href="#"><span class="readmorehomebox">read more ›</span></a>
    </div>
</li>
<li>
    <h3><a>Item 3</a></h3>
    <div class="sub">
        <p>Some blah blah here.</p>
        <a href="#"><span class="readmorehomebox">read more ›</span></a>
    </div>
</li>
</ul>

Here is my jQuery:

  $('#menu-classes h3').click(function(){
    if ($(this).attr('class') != 'active'){
      $('.sub').slideUp();
      $(this).next().slideToggle();
      $('#menu-classes h3').removeClass('active');
      $(this).addClass('active');
    }
  });

Here’s my CSS:

.sub {display: none;}

Answer 1

In document.ready just trigger a click on the one you want opened:

$(document).ready(function () {
    $("selector for item you want open").click();
});