jQuery Accordion - open specific section on pageload

Question

I have a rather basic implementation of a jQuery Accordion on a page (using 1.3.2, jQuery UI Core 1.72 and jQuery UI Accordion 1.7.2), and I wish to open the 2nd section when the page loads. i've tried numerous methods but nothing seems to work...

HEAD SCRIPT:

<script type="text/javascript"> $(function() {
    $("#accordion").accordion({
        event: "mouseover"
    });

});

BODY ACCORDION:

<div id="accordion">
<h3><a href="#">Headline 001</a></h3>
<div>
<ul>
     <li><a href="#1">Link 001</a></li>
     <li><a href="#2">Link 002</a></li>
     </ul>
</div>
<h3><a href="#">Headline 002</a></h3>
<div>
     <ul>
    <li><a href="#3">Link 003</a></li>
     <li><a href="#4">Link 004</a></li>
     </ul>
</div>

Any help would be greatly appreciated!

Not sure about the time this was made, but the activate index is 0 based, so for this question, the user would use `active: 1` — xdumaine, Jul 22 '11 at 16:00

score 21 · Accepted Answer · edited Jan 16 '14 at 07:05

21

$("#accordion").accordion({ active: 2, event: "mouseover" });

Should do the trick!

UPDATE

if that doesn't work, try

$("#accordion").accordion({  event: "mouseover" }).activate(2);

(N.B. this is updated to be a bit faster, thanks for the comments. To be honest, it should work with the 'active: 2' parameter, don't know why it didn't.)

edited Jan 16 '14 at 07:05

Praveen

55,303
33
133
164

answered Feb 04 '10 at 12:49

Ed James

10,385
16
71
103

that just causes the accordion to open both segments! am i missing something?? – Bomski Feb 04 '10 at 12:51
That's odd, accordions aren't meant to be able to open more than one item at once! – Ed James Feb 04 '10 at 12:53
i know... it doesn't work at all now... there must be something wrong with the javascript; – Bomski Feb 04 '10 at 12:54
update works, but closes all accordions....! modified index to 0 and resolved.... many thanks! – Bomski Feb 04 '10 at 12:56
Isn't the update really slow? As in, you are attaching the accordion the first time and then running the whole thing again to activate an index. Also, Darmen's answer will be a much faster approach after you just create it, i.e: `$('#accordion').accordion({ event: "mouseover"}).activate(2)` – Adhip Gupta Feb 04 '10 at 13:04
That would be slower than just calling `activate` method. – Darmen Amanbay Feb 04 '10 at 13:06
I am not using a JQuery accordion but something similar. Can you please help: http://stackoverflow.com/questions/2199716/jquery-accordion-open-specific-section-on-pageload – Si8 Sep 29 '15 at 19:21
This doesn't seem to work on jquery-ui v1.11 – Scott Dec 19 '22 at 21:53

Martijn van Hoof · Answer 2 · 2015-01-23T08:35:11.390

proper way to open a specific tab:

$("#accordion").accordion({
    collapsible  : true,
    active       : false,
    heightStyle  : "content",
    navigation   : true
});

Set the option:

//$("#accordion").accordion('option', 'active' , "INSERT YOUR TAB INDEX HERE");
$("#accordion").accordion('option', 'active' , 1);

or you could work with a hash like this:

if(location.hash){

    var tabIndex = parseInt(window.location.hash.substring(1));     
    $("#accordion").accordion('option', 'active' , tabIndex);

}

Vote if you use ;)

Thanks

score 8 · Answer 3 · answered Feb 04 '10 at 13:01

8

Does the following work?

$(function() {
    $("#accordion").accordion({
        event: "mouseover",
        collapsible: true,
        active: 2
    });

});

answered Feb 04 '10 at 13:01

Adhip Gupta

7,063
7
34
46

I like this answer because it demonstrates usage in slightly more complex situations. – Buttle Butkus Dec 11 '13 at 00:40

score 3 · Answer 4 · answered Feb 04 '10 at 12:58

3

Try

$("#accordion").activate(index);

answered Feb 04 '10 at 12:58

Darmen Amanbay

4,869
3
29
50

score 1 · Answer 5 · answered Feb 09 '12 at 09:43

I have resolved this question a little different since I had to create a menu.php which we include I have included every single page. In our project there was 1 accordion (a menu element with 2 submenus). So when the visitor is on the submenus, the accordion is open and the selected link (which are highlighted using CSS, not jQuery) active. But when the visitor is on a different page, the accordion works normally.

Here's the javascript:

var containsParams = /teacher|student/i.test(window.location.href), //regexp with string params
accordion = $("li.accordion"); // the accordion as a global

accordion.accordion({ //accordion setup on every page
    animated : !containsParams,
    active : containsParams,
    collapsible : true,
    event : "click",
    header : "h2"
});

//I like to use "self calling methods" since many times I need a main onload event and this way it's clear for every page and my main function still remains
(function () {
    if (containsParams) accordion.accordion("activate", 0);
})();

Hope you like it. =]

Best regards! =]

score 0 · Answer 6 · answered Jun 08 '14 at 01:24

0

You should write active: 1 instead of 2, because Accordion indexes sections from 0, not from one. Working code will look like that:

$("#accordion").accordion({ active: 1, event: "mouseover" });

Hope it will help a bit.

answered Jun 08 '14 at 01:24

Seb Wilgosz

1,240
15
24

score 0 · Answer 7 · edited May 18 '15 at 22:34

0

As others have mentioned, the following will make it active on opening:

$("#accordion").accordion({ active: 1 });

It is active:1 since it is the 2nd of the accordion's index {0,1,2,...}; There seems to be some confusion in other answers as the element's contents contain the character "2"...

edited May 18 '15 at 22:34

OhBeWise

5,350
3
32
60

answered May 18 '15 at 21:51

THOMAS MANN

1

jQuery Accordion - open specific section on pageload

7 Answers7

Linked