別ページから飛んできたときアコーディオンの指定の要素で開きたい

アコーディオンへアンカーリンクを設定したときに、リンク先のアコーディオンを開いた状態にしたい。

Aページから、飛んできた場合に、
Bページの特定の項目のアコーディオンを開いた状態にしたいです。

Aのソース

<ul>
<li><a href="B.html#tab1">このリンクはTab1に飛びます。</a></li>
<li><a href="B.html#tab2">このリンクはTab2に飛びます。</a></li>
<li><a href="B.html#tab3">このリンクはTab3に飛びます。</a></li>
</ul>

Bのソース

<style>
    .aco_title{
        background-color: #F2F2F2;
        padding :25px;
    }
    .aco_box{
        background-color: #ccc;
        padding: 50px;
        display: none;
    }
</style>

 <div id="aco_wrap">
    <div class="acoblock" id="aco01">
       <h2 class="aco_title">これは1のタイトルです</h2>
       <div class="aco_box">
        これはアコーディオン1の中身です。   
       </div>
    </div>
    
    <div class="acoblock" id="aco02">
       <h2 class="aco_title">これは2のタイトルです</h2>
       <div class="aco_box">
        これはアコーディオン2の中身です。   
       </div>
    </div>
    
    <div class="acoblock" id="aco03">
       <h2 class="aco_title">これは3のタイトルです</h2>
       <div class="aco_box">
        これはアコーディオン3の中身です。   
       </div>
    </div>
 </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function() {
 $('.aco_title').click(function() {
 var index = $('.aco_title').index(this);
 
 $('.aco_box').css('display','none');
 $('.aco_box').eq(index).fadeIn();
 $(this).addClass('select')
 });
});  
</script>

試したこと

https://teratail.com/questions/154967
を参考にしてみましたが、アコーディオンがいくつもあり、上記の方法では指定のアコーディオンのアンカーリンクができませんでした。
お知恵を拝借いただければと思います。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

追記
酷い勘違いをしておりました。
id=""と#が一致してないんですね。
揃えた方が楽な気がしますが、こだわりがある感じでしょうか。

以下idと#の文字列を揃えていただいた場合にご利用いただけるサンプルコードです。
※ローカルにて動作確認済み

javascript
1$(function() {
2  $(location.hash).find('.aco_box').css('display','none');
3  $(location.hash).find('.aco_box').fadeIn();
4  $(location.hash).find('h2').addClass('select');
5});