open accordion panel from external anchor link

Question

Asked this question a few weeks ago, but have not been able to find a solution - I'm a code novice, so I'll do my best to be more specific.

I have a page with an accordion - it's built-in as a short code that comes with the site theme. I have links in external pages that have anchor tags that take you to the accordion page - right now when those links are clicked, user is taken to the term but the panel does not open. I would like for the panel of the accordion to also open. As-is, all the panels are closed when you get to the page. Here is the code I have so far to remove the 'closed' class when a link w/an anchor is clicked:

var anchor = window.location.hash.substring(1);
$('.' + anchor).removeClass('su-spoiler-closed');

I have not been able to get it to work, perhaps I don't have it in the right spot? Maybe jquery is not working on the page in general?

Answer 1

You may also use CSS, it's easier for us novices.

/*accordion ids' unhide*/
    #id:target{
        display:block;
    }
/* end css */

link: www.website.com/page.htm#id

Answer 2

I think the answer to your question is here: jquery open accordion from link

You just need to get the hash content from current url and change the accordion.

Answer 3

Assuming jQuerUI's accordion

Basically, you want to listen for the action on load and use the API to set the desired element.

API: http://api.jqueryui.com/accordion/#option-active

you must class a parent wrapper of your accordion (here, as .parent) for this selector syntax to work:

$(function(){
    var anchor = window.location.hash.substring(1);

    $('.parent a[href$="' + anchor+ '"]').ready(function() {
          var index = $(this).parent().children().index(this);
          $( ".parent" ).accordion( "option", "active", parseInt(index,10) );
    });
});