[ACCEPTED]-jQuery UI Accordion activate-jquery-ui-accordion

Accepted answer
Score: 12

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


that works everytime 1 and anywhere not just accordion

Score: 12

From documentation:

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

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


Score: 10

for me worked



Score: 9

You need to call it using the function called 2 accordion:

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

To open a section containing a specific 1 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'); 
Score: 9

This FINALLY worked for me:

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

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

Score: 3

I had the same problem with activating an 5 accordion with #id. Sadly I hadn't found 4 a way to this, so I've created a hack. I 3 iterate through div elements in my accordion 2 in order to get the index of interesting 1 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);
Score: 2

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

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

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

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


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

Note: // idsForLaterChecks is global

Score: 1

With jQuery 1.9+ the:

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

is now:

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

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

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

try this:

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





The correct syntax for activating 1 an accordion is

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

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

Score: 0

You can also enable and disable the accordion 1 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");
Score: 0

Here's another way.

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

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

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

Then activate whichever 5 panel you wish with:

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

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

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

More Related questions