基于ID的手风琴中的打开元素-jQuery

Question

I have a simple jQuery Accordion on my website.

Within each element, there are <span> elements with unique IDs.

So... if I click /gallery#football it should open the 2nd block in my Accordion.

Is this possible?

My Fiddle is here .

Javascript

(function($) {
    var allPanels = $('.accordion > dd').hide();
    var allLinks = $('a.heading');
    $('.accordion > dt > a').click(function() {
        allPanels.slideUp();

        //Remove all 
        allLinks.removeClass('active');

        if ($(this).parent().next().is(":visible")) return false;
        $(this).parent().next().slideDown();

        //Add active class
        $(this).addClass('active');

        return false;
    });
    $('.accordion > dt > a').first().trigger('click');
})(jQuery);

HTML

<dl class="accordion">
<dt><a href="" class="heading">Tester</a></dt>
<dd>
    <span id="tester"></span>
    <span id="anothertester"></span>
    <p>bla</p>
</dd>

<dt><a href="" class="heading">Sports</a></dt>
<dd>
    <span id="football"></span>
    <span id="basketball"></span>
    <p>bla</p>
</dd>
</dl>

Answer 1

You use the find() and parent() or closest() functions:

// Get id from url
var url = window.location.pathname;
var id = url.substring(url.lastIndexOf('#')); // This will give you #football

var spanTag = $('.accordion').find(id); //#football span tag
var parentTag = spanTag.closest('dd');

//open the accordion
...

The best way is to create a new function for this:

function setAccordion() {
    // Get id from url
    var url = window.location.pathname;
    var id = url.substring(url.lastIndexOf('#')); // This will give you #football

    var spanTag = $('.accordion').find(id); //#football span tag
    var parentTag = spanTag.closest('dd');

    //open the accordion
    ...
}

// Call the function
setAccordion();

Working DEMO in jsfiddle:

You can test it also to change the #football id by eg #tester , which opens the first accordion.

http://jsfiddle.net/2hmzcgqm/11/