accordion fix (jquery)

Question

HTML

<h2 class="sec-title">one</h2>
<div class="sec-content">content 1</div>
<h2 class="sec-title">two</h2>
<div class="sec-content">content 2</div>

jQuery:

$('.sec-content').hide();
$('.sec-title:first').addClass('active').next().show();

$('.sec-title').click(function(){
 if( $(this).next().is(':hidden') ) { 
  $('.sec-title').removeClass('active').next().slideUp();
  $(this).toggleClass('active').next().slideDown(); 
 }
 return false;
});

... works but what if want to make the second accordion section active on pageload? what do I change?

Thanks for your help

Answer 1

You may use (jQuery UI Accordion](http://docs.jquery.com/UI/Accordion) instead of reinventing the wheel. Pay close attention to its active option. Then your code will become simplified to as simple as

$(document).ready(function() {
    $("#accordion").accordion({ active: 1 });
});​

Take a look for an example here.

Answer 2

Try changing the line where you select the first sec-title class element to this:

$('.sec-title:eq(1)').addClass('active').next().show();

Here's the API documentation for the :eq selector. I think it will do what you want. It will select the nth element that matches the selector. Remember that eq() is 0-based - so :eq(1) is selecting the second item that has the sec-title class.

Here's my fiddle that illustrates this: http://jsfiddle.net/7KdGn/1/

I hope this helps!