【JavaScript】特定のアコーディオンを開いた状態で表示させる

やりたいこと

別のページからリンクを踏んで該当ページを開いた際に特定のアコーディオンを開いた状態で表示させたいと考えています。
他の方の投稿を見たり、検索して色々試してみましたが、うまくいきませんでしたので、ご助力頂きたいと思い投稿させて頂きます。

現在は".sousa-ul"に"display:none;"を設定していて、".step-sousa"をクリックしないと表示されないようにしています。
また、別の".step-sousa"をクリックすると現在開いている".sousa-ul"は閉じてクリックしたアコーディオンが開くようになっています。
この機能はそのままにしておいて
別ページ http://url/#1をクリックし、ページを開くと id="1" に内包されたアコーディオンメニューを表示させるようにしたいと考えています。

よろしくお願い致します。

該当のソースコード

リンク元のページのコードはこのようになっています。

html
1<ul class="inner3">
2<li class="clearfix"><a href="http://url/#1"><img src=""><span>タイトル1</span></a></li>
3<li class="clearfix"><a href="http://url/#2"><img src=""><span>タイトル2</span></a></li>
4<li class="clearfix"><a href="http://url/#3"><img src=""><span>タイトル3</span></a></li>
5<li class="clearfix"><a href="http://url/#4"><img src=""><span>タイトル4</span></a></li>
6</ul>

そしてリンク先の現在のコードはこのようになっています。

html
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2<script>
3$(function(){
4 $('.step-sousa').click(function(){
5 $(this).next('.sousa-ul').slideToggle();
6 $('.step-sousa').not($(this)).next('.sousa-ul').slideUp();
7 });
8});
9</script>
10
11<div class="step-sousa clearfix"  id="1">
12<img src=""><span>タイトル1</span>
13</div>
14<ul class="sousa-ul">
15 <li><a href="http://url/">内容1</a></li>
16 <li><a href="http://url/">内容2</a></li>
17 <li><a href="http://url/">内容3</a></li>
18</ul>
19
20<div class="step-sousa clearfix"  id="2">
21<img src=""><span>タイトル2</span>
22</div>
23<ul class="sousa-ul">
24 <li><a href="http://url/">内容4</a></li>
25 <li><a href="http://url/">内容5</a></li>
26 <li><a href="http://url/">内容6</a></li>
27</ul>
28
29・・・

試したこと

https://teratail.com/questions/100264
https://teratail.com/questions/154967

補足情報（FW/ツールのバージョンなど）

Wordpress 5.1.1を使用しています。

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

回答1件

ベストアンサー

location.hashでハッシュを取得して
それを元に開閉するようにすればできます。

javascript
1$(function() {
2  function showByHash() {
3    var hash = location.hash;
4    if (hash) {
5      $(".sousa-ul").hide();
6      $(hash).next().show();
7    }
8  }
9  showByHash();
10  window.addEventListener("hashchange", showByHash);
11
12  $(".step-sousa").click(function() {
13    $(this)
14      .next(".sousa-ul")
15      .slideToggle();
16    $(".step-sousa")
17      .not($(this))
18      .next(".sousa-ul")
19      .slideUp();
20  });
21});