別ページからアンカーリンクで、アコーディオンを開きたい。

前提・実現したいこと

通常のアコーディオンを以下のように作ったのですが、
タイトル通り、別ページからアンカーリンクで遷移して開くようにしたいです。

当方、JS初心者の為、なかなかうまくいかず。。。

参考サイト
https://elecre.net/2019/01/11/open-specified-element-of-accordion/

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style>
	.ac-btn{
		background: #333;
		color: #fff;
		padding: 5px 10px;
	}
	.ac-body p{
		background: #ccc;
		padding: 50px 10px;
	}
</style>
</head>
<body>
	<!--page1.html-->
	<a href="page2.html#num01">アコーディオン1へ</a>
	<a href="page2.html#num02">アコーディオン2へ</a>
	<a href="page2.html#num03">アコーディオン3へ</a>
	
	<!--page2.html-->
	<div id="num01">
		<div class="ac-box">
			<div class="ac-btn -more">
				<p class="text">開く</p>
			</div>
			<div class="ac-body">
				<p>アコーディオンの中身1。アコーディオンの中身1。アコーディオンの中身1。</p>
			</div>
		</div>
	</div>
	<div id="num02">
		<div class="ac-box">
			<div class="ac-btn -more">
				<p class="text">開く</p>
			</div>
			<div class="ac-body">
				<p>アコーディオンの中身2。アコーディオンの中身2。アコーディオンの中身2。</p>
			</div>
		</div>
	</div>
	<div id="num03">
		<div class="ac-box">
			<div class="ac-btn -more">
				<p class="text">開く</p>
			</div>
			<div class="ac-body">
				<p>アコーディオンの中身3。アコーディオンの中身3。アコーディオンの中身3。</p>
			</div>
		</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script>
		$(function(){
			var acBtn = $('body').find('.ac-btn');
			var acArray = [];
			for (var i = 0; i < acBtn.length; i++) {
				acArray.push("ga_btn_" + i);
			}
			$(".ac-btn").each(function(i){
				$(this).children(".text").addClass(acArray[i]);
			});
			$('.ac-btn').next(".ac-body").hide();
			$('.ac-btn').on("click",function () {
				var acIndex = $('.ac-btn').index(this);
				if ($(this).next(".ac-body").is(':hidden')) {
					$(this).next(".ac-body").slideDown();
					$(this).addClass('-open');
					$(this).children(".text").removeClass(acArray[acIndex]);
					if($(this).hasClass('-more')) {
						$(this).children(".text").text('閉じる');
					}
				} else {
					$(this).next(".ac-body").slideUp();
					$(this).removeClass('-open');
					$(this).children(".text").addClass(acArray[acIndex]);
					if($(this).hasClass('-more')) {
						$(this).children(".text").text('開く');
						var position = $(this).parent(".ac-box").offset().top;
						$("html, body").animate({scrollTop:position}, 300, "swing");
					} 
				}
			});
		});
</script>
</body>
</html>

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

ざっくりこんな感じでどうでしょう？

投稿2020/02/07 05:32

総合スコア114779

2020/02/07 05:33

2020/02/07 05:33

2020/02/07 05:34

※ただしリロードするとhashが元のままなので呼び出された状態にもどっちゃいますけど

WorkUE

2020/02/07 07:12

ありがとうございます！できました！ただ、ページ内アンカーリンクの場合でも開くようにしたいと思っています。説明欄にちゃんと書いておけばよかったです、すみません。。。

yambejp

2020/02/07 07:49

>ページ内アンカーリンク $(function(){ $('.ac-btn').on('click',function(){ $(this).find('.text').text($(this).find('.text').text()=="開く"?"閉じる":"開く"); $(this).next('.ac-body').find('p').toggleClass('active'); $('.ac-btn .text').not($(this).find('.text')).text("開く"); $('.ac-body').not($(this).next('.ac-body')).find('p').removeClass('active'); }); $(location.hash).find('.ac-btn').trigger('click'); }); $(window).on('popstate',function(){ $(location.hash).find('.ac-btn').trigger('click'); });

WorkUE

2020/02/07 12:40

できました！ご丁寧にあがとうございました。

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