My problem is this: I have a list (ul > li) that when clicking on one of them, should go to a page where it contains the specific accordions.
The site is this: www.alfacontabil.com.br
On the home page I have Services and Inquiries, each with your list.
When you click on an item in the list, you have to go to the page, but the content is open. Ex: If you click Services > For your Company, on the specific page the accordion must come with the 'For Your Company' content open.
I was able to solve my problem with the following script:
jQuery(document).ready(function(){
//Get the selected accordion index, based on the URL hash.
var index = jQuery('#tabs h3').index(
jQuery('#tabs h3 a[href="'+window.location.hash+'"]')
.parent());
//The index will be -1 if there is no hash in the URL. This
//is necessary if we want the first section expanded by default.
if (index < 0){
index = 0;
}
//The change event handler will add the hash to the URL when
//a section is selected.
var change = function(event, ui){
window.location.hash = ui.newHeader.children('a').attr('href');
}
//Build the accordion, using the URL hash selection and the
//change event handler.
jQuery('#tabs').accordion({
active: index,
change: change,
collapsible: true
});
});
You can use this code on each page since they have a well-defined hash / url equal to the anchor:
var hash = window.location.hash; // ir buscar a string no url, por exemplo #para-sua-empresa
var esteHash = jQuery('#tabs [href="' + hash + '"]').index(); // saber que posição essa ancora com o nome que o hash capturou tem
jQuery("#tabs").accordion( "option", "active", esteHash ); // abrir a opção com o valor pretendido