ページ内アンカーリンクを置き、アンカーリンクを押して飛んだ際に閉じているアコーディオンを
開くように記述を書きたいです。

下記のコードのように記述してみたのですが、うまくいきません。

参考サイトは以下を使用しました。
http://coolwebwindow.com/jquery-lab/archives/428

html
1      <div class="inner">
2	  　<div class="head01 head02">
3	    　<div class="box">
4	      　<div class="cont info-cont">
5	          <ul class="head-ul">
6	          　<li class="head-text"><a href="#nya01">あああああ</a></li>
7	            <li class="head-text"><a href="#nya02">いいいいい</a></li>
8	            <li class="head-text"><a href="#nya03">ううううう</a></li>
9	          </ul>
10	        </div>
11	      </div>
12	    </div>
13       </div>
14
15          <section class="acc">
16            <div id="nya01" class="cont-head">
17              <h3 class="main-h3">あああああ</h3>
18            </div>
19            <div class="inner contWrap">                
20　　　　　　　　内容
21	          <br>
22		      <br>
23			  <br>
24			  <br>
25			  <br>
26			  <br>
27            </div>
28          </section>
29
30          <section class="acc">
31            <div id="nya02" class="cont-head">
32              <h3 class="main-h3">いいいいい</h3>
33            </div>
34            <div class="inner contWrap">                
35　　　　　　　　内容
36	          <br>
37		      <br>
38			  <br>
39			  <br>
40			  <br>
41			  <br>
42            </div>
43          </section>
44
45          <section class="acc">
46            <div id="nya03" class="cont-head">
47              <h3 class="main-h3">ううううう</h3>
48            </div>
49            <div class="inner contWrap">                
50　　　　　　　　内容
51	          <br>
52		      <br>
53			  <br>
54			  <br>
55			  <br>
56			  <br>
57            </div>
58          </section>

jQuery
1  $(function(){
2// コンテンツの開閉
3    $(".cont-head h3").on("click", function() {
4      $(this).parent().next().slideToggle();
5      $(this).toggleClass('active');
6    });
7// アンカーリンクで開閉
8	// #で始まるアンカーをクリックした場合に処理
9    $('.menu a[href^=#]').on('click', function() {
10        // 開閉パネルが閉じていたら
11        if($(this).toggleClass('.contWrap').css('display') == 'none'){
12            // 同時に開閉イベントを実行
13            $(href).children('h3').trigger('click');
14        }
15        return false;
16    });
17});

css
1.inner {
2    width:800px;
3    margin:0 auto;
4}
5.head01 {
6	margin-bottom: 300px;
7}
8.head-ul {
9    margin:0;
10    padding:0;
11}
12
13.head-ul li {
14    float:left;
15    margin-right:10px;
16    list-style:none;
17}
18
19.head-ul li a {
20    display:block;
21    padding:10px 20px;
22    color:#fff;
23    background:#000;
24    cursor:pointer;
25}
26
27.contWrap {
28    display:none;
29    padding:10px;
30    background:#f19c75;
31}
32
33.cont-head h3 {
34    margin:10px 0;
35    padding:10px;
36    line-height:20px;
37    color:#fff;
38    background:#000;
39    cursor:pointer;
40}
41
42.cont-head h3 {
43    display: block;
44}

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

回答2件

完成品があるのだからそれを使えばいいのでは？

JavaScript
1    //$('.menu a[href^=#]').on('click', function() { // .menuはない。
2    $('.head-ul a[href^="#"]').on('click', function() {
3        var href= $(this).attr("href"); // href未定義なので追加。
4        //if($(this).toggleClass('.contWrap').css('display') == 'none'){
5        if($(href).next().css('display') == 'none'){
6            $(href).children('h3').trigger('click');
7        }
8        //return false; // scrollTop を変更しないのならtrueが必要。
9    });

投稿2019/04/16 06:14

x_x

総合スコア13749

mmngchip

2019/04/18 00:52

コメントで解説をつけていただき、大変勉強になりました。ありがとうございます！

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

ベストアンサー

構造からするとこんな感じ

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $('.contWrap').hide();
5  $(window).on('popstate',function(){
6    $('.contWrap').hide();
7    $(location.hash).next('.contWrap').show();
8  });
9});
10</script>
11
12<div class="inner">
13<div class="head01 head02">
14<div class="box">
15<div class="cont info-cont">
16<ul class="head-ul">
17<li class="head-text"><a href="#nya01">あああああ</a></li>
18<li class="head-text"><a href="#nya02">いいいいい</a></li>
19<li class="head-text"><a href="#nya03">ううううう</a></li>
20</ul>
21</div>
22</div>
23</div>
24</div>
25
26<section class="acc">
27<div id="nya01" class="cont-head">
28<h3 class="main-h3">あああああ</h3>
29</div>
30<div class="inner contWrap">                
31内容
32<br><br><br><br><br><br>
33</div>
34</section>
35
36<section class="acc">
37<div id="nya02" class="cont-head">
38<h3 class="main-h3">いいいいい</h3>
39</div>
40<div class="inner contWrap">                
41内容
42<br><br><br><br><br><br>
43</div>
44</section>
45
46<section class="acc">
47<div id="nya03" class="cont-head">
48<h3 class="main-h3">ううううう</h3>
49</div>
50<div class="inner contWrap">                
51内容
52<br><br><br><br><br><br>
53</div>
54</section>

IE対応

IE8以上ならこれで行けそうです

javascript
1$(function(){
2  $('.contWrap').hide();
3  $('a[href^="#"').on('click',function(){
4    $('.contWrap').hide();
5    $($(this).attr('href')).next('.contWrap').show();
6  });
7});