通过外部链接打开手风琴面板

Question

I have the following code and am trying to open an accordion panel from an external link. I got the code as an example from a website and it has worked fine up until now however I can't seem to figure out how to do this.

jQuery:

jQuery(document).ready(function() {
    function close_accordion_section() {
        jQuery('.accordion .accordion-section-title').removeClass('active');
        jQuery('.accordion .accordion-section content').slideUp(300).removeClass('open');
    }

    jQuery('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = jQuery(this).attr('href');

        if(jQuery(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();

            // Add active class to section title
            jQuery(this).addClass('active');
            // Open up the hidden content panel
            jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }

        e.preventDefault();
    });
});

HTML:

    <div class="accordion">
        <div class="accordion-section">
            <a class="accordion-section-title" href="#section-1">Section 1: </a>
            <div id="section-1" class="accordion-section-content">
                <p>Content goes here</p>
            </div><!--end .accordion-section-content-->
        </div><!--end .accordion-section-->

        <div class="accordion-section">
            <a class="accordion-section-title" href="#section-2">Section 2: </a>
            <div id="section-2" class="accordion-section-content">
                <p>Content goes here</p>
            </div><!--end .accordion-section-content-->
        </div><!--end .accordion-section-->

So far I have tried the external link as:

<a href="#section-2.active">Link</a>

... and a few things similar to that but no joy yet unfortunately. I've also fiddled around with the jQuery but also didn't get anywhere.

I've not had much experience with jQuery and I'm trying to learn it as I go so please be thorough with any answers so I can learn. Thanks very much!

Answer 1

When the page loads your ready function will run, this should open the accordion section the URI's hash refers to:

jQuery(document).ready(function() {
    // get the #section from the URL
    var hash = window.location.hash; 
    // open accordion
    jQuery(hash).slideDown(300).addClass('open'); 
    // set title to active 
    jQuery(hash).prev('.accordion-section-title').addClass('active');
    /* ... the rest of your code here */
});

you might get a slight performance boost if you don't get the jQuery object twice, you can chain these like this:

    jQuery(hash).slideDown(300).addClass('open')
                .prev('.accordion-section-title').addClass('active');