jQuery UI Accordion activate

Question

I'm not getting how to do this, or if I can do this. I have a jQuery UI Accordion, multiple sections with each section containing multiple anchor tags each with a unique string id.

I'd like to be able to have the accordion open to where a particular element with a given id is. Like say id "item117". Can I use something like

$('#accordion').activate('activate','#item117');

or even

$('#accordion').activate('activate',117);

I've tried those and some variations but can't get it to go. In the case I was trying to get working, the accordion should've opened to the end of the second section.

I'm still not getting this, so maybe I'm doing something else wrong as well. I've stripped it down to an example page here: http://www.ofthejungle.com/testaccordion.php Please have a look at it and its source.

Are you using the latest jQuery ui version? I believe the function used to be `change` not `activate` — Basic, Dec 05 '12 at 16:30
Please note that this question was asked in 2009. When looking at the answers check the date of the response to see if its timely for you. — eflat, May 08 '15 at 21:45

score 12 · Answer 1 · answered Jan 31 '13 at 16:41

12

From documentation:

// getter
var active = $( ".selector" ).accordion( "option", "active" );

// setter
$( ".selector" ).accordion( "option", "active", 2 );

answered Jan 31 '13 at 16:41

BTR

121
1
2

score 12 · Answer 2 · answered Sep 07 '11 at 11:08

12

have been over this too & found nice and universal solution
- emulate clicking the header of required item by its id

$('#header-of-item-258').click();

that works everytime and anywhere not just accordion

answered Sep 07 '11 at 11:08

Peminator

657
1
8
20

I like this and use it for various odd menu needs. But I like to use the built in functionality where possible. So I've +1 you and @BTR :) – Bradmage Dec 17 '17 at 05:36

score 10 · Answer 3 · answered Jun 12 '11 at 11:25

10

for me worked

$("#accordion").accordion({active:"h3:last"})

answered Jun 12 '11 at 11:25

Laurentiu

109
1
2

score 9 · Answer 4 · answered Dec 14 '09 at 07:04

9

You need to call it using the function called accordion:

// Open the third set (zero based index)
$('#accordion').accordion('activate', 2);

To open a section containing a specific element, you would do something like this. Note: you need to target the trigger that normally opens and closes the section. In the docs this is an h3 element, your trigger element may be different, so change this accordingly.

$('#accordion').accordion('activate', '#accordion > div:has(#item117) > h3');

answered Dec 14 '09 at 07:04

Doug Neiner

62,310
11
103
117

is this documented in the jQuery UI API anywhere? – CoryDorning Mar 20 '13 at 15:28
1

In jQuery UI 1.10.2 I get the error: `no such method 'activate' for accordion widget instance` – nnyby Mar 22 '13 at 17:23
1

I think you mean active, not activate. – ygesher Aug 20 '13 at 14:28

score 9 · Answer 5 · answered Mar 21 '11 at 19:06

9

This FINALLY worked for me:

$("#accordion").accordion("activate", $("#h3-id"));

NOTE!!! The id has to be that of the <h3> element you want to open up (in the default accordion setup).

answered Mar 21 '11 at 19:06

Chuck Han

568
1
5
11

score 3 · Answer 6 · answered Sep 24 '10 at 10:55

I had the same problem with activating an accordion with #id. Sadly I hadn't found a way to this, so I've created a hack. I iterate through div elements in my accordion in order to get the index of interesting div. It looks like this:

acc = 'tab-you-are-interested-in';

// find corresponding accordion
act = 0;
panels = $('#accordion-element > div');
for (i=0; i<panels.length; i++) {
    if ( panels[i].id == acc ) {
        act = i;  
    }
}

$('#accordion-element').accordion('activate', act);

just what I was looking for this moment! – JonSnow Jan 14 '15 at 18:14 — JonSnow, Jan 14 '15 at 18:14

score 2 · Answer 7 · edited Jul 11 '12 at 22:49

When you click on header, it is h3 element and it opens the next div..that is functionality. Now, For activate , you need to provide index or the element. index might be different than your id. so i would use :

$('.selector').accordion('option', 'activate', $(h3#id));

If you have index, you can use that..But most of the cases , if you created accordion dynamically, it is not easy to get index of an id. You can find indices like this..

 var processingHeaders = $('#accordion h3');
 for (i = 0; i < processingHeaders.length; i++) {

        ids.push($(processingHeaders[i]).attr('id'));
        idsForLaterChecks.push($(processingHeaders[i]).attr('id')); 
    }

now i got ids.. using indexOf : find the index in the array and use it..

Note: // idsForLaterChecks is global

score 1 · Answer 8 · answered Jun 04 '13 at 19:34

With jQuery 1.9+ the:

$('#accordion').activate('activate', elementSelector);

is now:

$('#accordion').activate('option', 'active', elementSelector);

If you find it easier to use traversing methods, if you have HTML like this:

<div id="accordion">
    <h3><a href="#">Section</a></h3>
    <div>
        <p id="#item117" class="item">
            <a class="link-active" href="">Item 117</a>
        </p>            
    </div>
</div>

try this:

var myh3 = $('#item117').parent().prev('h3');
$('#accordion').accordion('option', 'active', myh3);

score 0 · Answer 9 · answered Aug 26 '12 at 08:50

Here's another way.

Include an ID="someId" in just each of the H3 header tags of the accordion and name the id's unique.

For example this id would be in series 'AccjA' the next h4 would be 'AccjB':

<h4 class="Accj" id="AccjA">
       <a href="#settings">A Fan?</a>
</h4>

Then activate whichever panel you wish with:

    $('#Accjoin').accordion('activate', '#AccjoinA')

I've used the above on a timeout to catch the attention of the user after the page is loaded with a 2 second delay using Ben Alman's ".doTimeout" function like:

$.doTimeout(2000, function () {
    $('#Accjoin').accordion('activate', '#AccjoinA')
});

The above doesn't work now with 1.9. Like Jeremy Zerr points out now. jQuery 1.9.+ has a different setter!! http://api.jqueryui.com/accordion/#option-active — Martin Sansone - MiOEE, Aug 15 '13 at 03:35

score 0 · Answer 10 · edited Jul 28 '14 at 15:09

0

Try

$('#accordion').activate('#item117');

or

$('#accordion').activate(document.getElementById('item117'));

The correct syntax for activating an accordion is

$(".selector").activate(var index)

where index is String,Element,boolean,Number,JQuery

edited Jul 28 '14 at 15:09

DaveRead

3,259
1
18
24

answered Dec 14 '09 at 07:03

Saeros

2,438
3
20
24

score 0 · Answer 11 · answered Jul 29 '11 at 23:34

0

You can also enable and disable the accordion like this:

// Add the class ui-state-disabled to the headers that you want disabled
$( ".whatyouwantdisabled" ).addClass("ui-state-disabled");

To reactivate the tab:

// Remove the class ui-state-disabled to the headers that you want to enable
$( ".whatyouwantenabled" ).removeClass("ui-state-disabled");

answered Jul 29 '11 at 23:34

Shib

36
2

This does not work for me. The classes are add, however, accordion does not react. – Mateng Mar 25 '12 at 12:41

score -1 · Answer 12 · answered Oct 10 '12 at 00:21

Whatch the jquery API

Activate the second content of the Accordion contained in .

$(".selector").activate(1)

Close all content parts of the accordion.

$(".selector").activate(false)

Activate the first element matching the given expression.

$(".selector").activate("a:first")

score -2 · Answer 13 · edited Dec 30 '15 at 01:40

-2

$('#collapseOne').collapse('toggle');

edited Dec 30 '15 at 01:40

Undo

25,204
37
102
124

answered Dec 30 '15 at 01:10

antoniodornellas

1

jQuery UI Accordion activate

13 Answers13

Linked