0

I use the slideUp and slideDown function to generate an jQuery accordion. But how do I open the accordion with an external link, a link like this: http://www.example.com/page.html#index-number, where index-number match the number of the header in the accordion panel.

Ex.: http://www.example.com/page.html#1, will slidedown/open the first panel and http://www.example.com/page.html#3, will open the third panel.

This is my html:

<div id="leftCol-3">
    <div class="csc-header">
        <h1>Header-1</h1>
    </div>
    <div class="accordionTrigger" id="link-1">body Text-1</div>
    <div class="csc-header">
        <h1>Header-2</h1>
    </div>
    <div class="accordionTrigger" id="link-2">body Text-2</div>
    <div class="csc-header">
        <h1>Header-3</h1>
    </div>
    <div class="accordionTrigger" id="link-3">body Text-3</div>
</div>

And this is my js:

$(document).ready(function()  {
    //From http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/

    // hide the divs on page load   
    $('#leftCol-3 div > .accordionTrigger').hide(); 

    //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
    $('#leftCol-3 div .csc-header').click(function() {

        //REMOVE THE ON CLASS FROM ALL BUTTONS
        $('#leftCol-3 div .csc-header').removeClass('active');

        //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
        $('.accordionTrigger').slideUp('normal');

        //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
        if($(this).next().is(':hidden') == true) {

            //ADD THE ON CLASS TO THE BUTTON
            $(this).addClass('active');

            //OPEN THE SLIDE
            $(this).next().slideDown('normal');
         } 

     });
});
Floern
  • 33,559
  • 24
  • 104
  • 119
stig
  • 445
  • 1
  • 4
  • 9

1 Answers1

0

You need to dynamically add the class "active" to whichever ID is being triggered by the URL. You'll need to add an ID to each div.accordionTrigger in order to do this.

So, to make "body Text-1" visible: 

<div id="leftCol-3">
    <div class="csc-header">
        <h1>Header-1</h1>
    </div>
    <div class="accordionTrigger active" id="text1">body Text-1</div>
    <div class="csc-header">
        <h1>Header-2</h1>
    </div>
    <div class="accordionTrigger" id="text2">body Text-2</div>
    <div class="csc-header">
        <h1>Header-3</h1>
    </div>
    <div class="accordionTrigger" id="text3">body Text-3</div>
</div>

Do you have access to server-side scripting such as PHP? I would do it this way if so, otherwise I'm sure there's a jQuery solution too.

da5id
  • 9,100
  • 9
  • 39
  • 53