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.

Answer 1

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

Answer 2

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");

Answer 3

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")

Answer 4

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);

Answer 5

for me worked

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

Answer 6

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