Question

I am wondering how to open a particular accordion (actually a toggle).

Here is my jquery

  $(document).ready(function()
    {
        //Add Inactive Class To All Accordion Headers
        $('.accordion-header').toggleClass('inactive-header');

        //Open The First Accordion Section When Page Loads
        $('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
        $('.accordion-content').first().slideDown().toggleClass('open-content');

        // The Accordion Effect
        $('.accordion-header').click(function () {
            if($(this).is('.inactive-header')) {
                $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
                $(this).toggleClass('active-header').toggleClass('inactive-header');
                $(this).next().slideToggle().toggleClass('open-content');
            }

            else {
                $(this).toggleClass('active-header').toggleClass('inactive-header');
                $(this).next().slideToggle().toggleClass('open-content');
            }
        });

        return false;
    });​

What happens now is that on page load the very first item opens. How can I set it to where, say, the second items open?

I have a Fiddle here: http://jsfiddle.net/bbyrdhouse/LjDBa/

Thanks in advance.

Answer 1

To automatically open the second accordion, change the first lines to this:

$('.accordion-header').eq(1).toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').eq(1).slideDown().toggleClass('open-content');

eq(1) will locate the second item in the matched elements (the index is zero based). If you want to open the last accordion, use last() instead of eq(1).

See the updated fiddle: http://jsfiddle.net/adrianonantua/LjDBa/1/