Accordion jQuery - Открыть раздел с внешней ссылки

Question

У меня есть меню аккордеона, и я не могу понять, как установить связь. Меню прекрасно работает.

Когда я нажимаю на ссылку ниже, мое первое меню аккордеон должен открыть

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

JavaScript для аккордеона

<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> 

accordion.js файл

$(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; 
}); 

Тело код для аккордеона:

<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> 

Любая помощь приветствуется. Здесь у меня заканчиваются идеи.

Приветствия и спасибо заранее, G

Answer 1

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

(я позволю тебе узнать сами, как получить значение хеш-функции из URL)

редактировать: глядя на ваш код может быть также более актуальным для использования события хеш-манипулятора в вашем плагине аккордеона (вместо события щелчка)

Answer 2

Fiddle here! Это работает, как я понял из вашего вопроса.

<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> 

И Его браузер:

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

$accordion.accordion(); 

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

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

    return false; 
});