Accordion jQuery - Open section from external link

Question

I have an accordion menu and I can't figure out how to link. The menu itself works fine.

When I click the below link, my first accordion menu should open up

<a href="case_studies.html#case1">Case study 1</a>

JavaScript for the accordion

<script type="text/javascript">
$(document).ready(function(){
 $("a#show-panel").click(function(){
    $("#lightbox, #lightbox-panel").fadeIn(300);
 })
 $("a#close-panel").click(function(){
     $("#lightbox, #lightbox-panel").fadeOut(300);
 })
})
</script>

<script type="text/javascript">
    $(function(){
        $("#accordion-header").accordion({ navigation: true });
     });
</script>

The accordion.js file

$(document).ready(function()
{
    //Add Inactive Class To All Accordion Headers
    $('.accordion-header').toggleClass('inactive-header');

    //Set The Accordion Content Width
    var contentwidth = $('.accordion-header').width();
    $('.accordion-content').css({'width' : contentwidth });

/*  //Open The First Accordion Section When Page Loads
    $('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
    $('.accordion-content').first().slideDown().toggleClass('open-content');   */

    // The Accordion Effect
    $('.accordion-header').click(function () {
        if($(this).is('.inactive-header')) {
            $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }

        else {
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }
    });

    return false;
});

The Body code for the accordian is

<div id="accordion-container">
    <p class="accordion-header" style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;"><span style="padding-left:10px; color:#009edb; padding-top:10px; line-height:25px;"><a href="#case1">Case study 1</a></span></p>

        <div class="accordion-content">
        <div class="textInner">
                TEST TEXT THAT FALLS UNDER THE MENU
                </div>
        </div>

        <p class="accordion-header" style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;"><span style="padding-left:10px; color:#009edb; padding-top:10px; line-height:25px;"><a href="#case2">Case study 2</a></span></p>

        <div class="accordion-content">
        <div class="textInner">
                TEST TEXT THAT FALLS UNDER THE MENU
                </div>
        </div>
</div>

Any help is appreciated. I am running out of ideas here.

Cheers and thanks in advance, G

we really appreciate if you put all this in a [fiddle](http://jsfiddle.net) — Tomas Ramirez Sarduy, Oct 08 '13 at 06:28

mikakun · Answer 1 · 2013-10-08T06:20:46.623

0

 $(function(){
    $("#accordion-header").accordion({ navigation: true });
    $("[href='#case1']").parent('.accordion-header').click();
 });

(i let you find out by yourself how to get the hash value from url)

edit : looking at your code it might also be more relevant to use a hash change handler event in your accordion plugin (instead of a click event)

edited Oct 08 '13 at 06:20

answered Oct 08 '13 at 06:12

mikakun

2,203
2
16
24

Thanks for the reply mikakun. I have uploaded the file here: http://grouporigin.com/clients/zadco/test/case_studies.html My top navigation bar seems to have stopped working. I assume its because of the 'navigation: true' line ? And also after adding the script functions, the # value of the dropdown is not taken by my link. What am i doing wrong ? – Geeky Gaj Oct 08 '13 at 11:24

score 0 · Answer 2 · answered Feb 28 '14 at 15:09

Fiddle here! This works, as I understood from your question.

    <li class="dropdown">
    <a id="drop4" role="button" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
    <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
            <li role="presentation"><a class= "opener" data-panel="0" role="menuitem" tabindex="-1" href="#">Bank</a></li>
            <li role="presentation"><a role="menuitem"class= "opener" data-panel="1" tabindex="-1" href="#">Cash</a></li>
            <li role="presentation"><a role="menuitem" class= "opener" data-panel="2" tabindex="-1" href="#">Property</a></li>          
    </ul>
</li>
    <div id="Accordion">
    <h3>Section 1</h3>
    <div>
        <p></p>
    </div>
<h3>Section 2</h3>
    <div>
       <p></p>
    </div>
<h3>Section 3</h3>
    <div>
       <p></p>
    </div>
<h3>Section 4</h3>
    <div>
        <p>One</p>
        <p>Two</p>
    </div>

And Its javascript is:

var $accordion = $("#Accordion");

$accordion.accordion();

$(".opener").on("click", function () {
    var $this = $(this),
        toOpen = $this.data("panel");

    $accordion.accordion("option", "active", toOpen);

    return false;
});

Stop copy pasting others answers http://stackoverflow.com/questions/15339847/jquery-accordion-use-anchors-to-open-specific-panels-from-external-and-interna?answertab=votes#tab-top — KAsh, Mar 12 '14 at 12:31
I Didnt copy it from anywhere I had used it for my project, came across this ques so I answered....!!! — Yogesh, Mar 12 '14 at 13:59

Accordion jQuery - Open section from external link

2 Answers2