アンカーリンクかつアコーディオン開閉するコンテンツの「＋」「ー」を交互に表示させたい。

アンカーリンクかつ、アコーディオン開閉するようなメニューとそれに繋がるコンテンツを作っています。
Wordpressを利用したサイトです。
現状達成できたのが

メニューを押すとアンカーリンクに飛び、閉じていたコンテンツの中身も自動で開く。
別のメニューを押すと 1. と同じ動作が起き、かつ 1. で開いていた要素が自動で閉じる。
コンテンツ自体を押すとアコーディオン開閉する。

です。

ここでコンテンツが閉じている時は

コンテンツタイトル横に「＋」が表示され、
コンテンツが開いている時は

コンテンツタイトル横に「ー」が表示されるようになっています。

これが上記の
3.コンテンツ自体を押すとアコーディオン開閉する。
この場合は作動するのですが、 1. 2. の場合は作動せず、元の表示が「＋」であれば「＋」のまま、「ー」であれば「ー」のまま、アンカーリンクに飛びコンテンツが開閉してしまいます。

これが　1. 2.　の場合でも「＋」「ー」がチェンジするようにしたいです。
どなたかご教示、ご指摘賜りたいです。
よろしくお願いいたします。

以下コードです。

HTML
1    <div class="container">
2        <div class="menu">
3            <h3>サービス一覧</h3>
4            <ul class="row">
5                <li class="menu-01"><a href="#link-01">遺品整理</a></li>
6                <li class="menu-02"><a href="#link-02">生前整理</a></li>
7                <li class="menu-03"><a href="#link-03">遺品供養</a></li>
8                <li class="menu-04"><a href="#link-04">特殊清掃</a></li>
9                <li class="menu-05"><a href="#link-05">室内除菌</a></li>
10                <li class="menu-06"><a href="#link-06">不用品買取</a></li>
11                <li class="menu-07"><a href="#link-07">仏壇クリーニング</a></li>
12                <li class="menu-08"><a href="#link-08">各種手続き代行</a></li>
13            </ul>
14        </div><!-- /menu -->
15        <section>
16            <div class="title-acd" id="link-01">
17                <h4>遺品整理</h4>
18            </div><!-- title-acd -->
19            <div class="contWrap">                
20                <h5>
21                    大切なものを細かく、丁寧な仕分けで仕分けいたします。
22                </h5>
23                <div class="text">
24                    <p>
25                        弊社は供養、清掃、処分/買取まで一括でおこなえる、いわば「遺品整理のプロ」です。遺品整理は普通の不用品の整理とは全く違うものです。遺品整理とは、ご遺族の心に寄り添い遺品をどのように扱うべきか、どのようなものか、深く理解しています。 <br>
26                        そのため、弊社では遺品を不用品としてまとめて廃棄してしまうようなことは絶対にしません。一つ一つの遺品を確認をいただきながら、丁寧に手早く作業を進めて行きます。 その上で出た不用品は出来る限り買い取り・処分いたします。故人が大切にされていたものを、単にごみとして扱うことなく、安心してお任せいただけます。
27                    </p>
28                    <img src="<?php echo get_template_directory_uri() ?>/img/service/img-01.png" alt="">
29                </div><!-- /text -->
30            </div><!-- contWrap -->
31        </section>
32        <section>
33            <div class="title-acd" id="link-02">
34                <h4>生前整理</h4>
35            </div><!-- title-acd -->
36            <div class="contWrap">                
37                <h5>
38                    生きている間に身の回りの整理をしたいと言うお客様の要望にもお応えします。
39                </h5>
40                <div class="text">
41                    <p>
42                        自分が他界した後、財産や、身の回りの物たちはどうしたら良いのだろう…<br>
43                        家族と別々に暮らしている場合、そんなお悩みを一度は考えたことがあるのではないでしょうか？<br>
44                        老後の暮らしのことを考えて、身の回りを整理し、コンパクトな生活を送りたいと言う方も近年増加しています。<br>
45                        そのような方のために、弊社では生前整理・老前整理のご相談を受け付けております。<br>
46                        時間的にも、体力的にも余裕のある生前・老前なら、細かなご要望を叶えることがが可能です。<br>
47                        数多くの遺品整理の現場に立ち会った私たちですから、生前整理・老前整理でしておくと良いことなどの具体的なアドバイスも可能です。
48                    </p>
49                    <img src="<?php echo get_template_directory_uri() ?>/img/service/img-01.png" alt="">
50                </div><!-- /text -->
51            </div><!-- contWrap -->
52        </section>
53
54　　　　　-- 以下省略。同じ<section>~</section>の内容があと6個続きます。 --
55
56    </div><!-- /container -->

CSS
1    .menu {
2        margin-bottom: 45px;
3        @include pc {
4            margin-bottom: 25px;
5        }
6        h3 {
7            background-color: #47902f;
8            color: #fff;
9            font-size: 22px;
10            font-weight: bold;
11            padding: 5px 0;
12            text-align: center;
13            margin-bottom: 15px;
14            @include tab {
15                font-size: 20px;
16            }
17        }
18        ul {
19            text-align: center;
20            -ms-flex-pack: distribute;
21            justify-content: space-around;
22            -ms-flex-wrap: wrap;
23            flex-wrap: wrap;
24            @include tab {
25                max-width: 400px;
26                width: 100%;
27                margin: auto;
28            }
29            @include sp {
30                max-width: 350px;
31            }
32            li {
33                font-size: 18px;
34                font-weight: bold;
35                @include pc {
36                    margin-bottom: 20px;
37                    font-size: 14px;
38                }
39                @include tab {
40                    font-size: 15px;
41                    padding-right: 5px;
42                    padding-left: 5px;
43                }
44                @include sp {
45                    padding-right: 15px;
46                    padding-left: 15px;
47                }
48                a {
49                    &:after {
50                        content: "▼";
51                        display: block;
52                        color: #47902f;
53                        font-size: 14px;
54                    }
55                }
56            }
57        }
58    }
59    .title-acd {
60        background-color: #47902f;
61        color: #fff;
62        font-size: 22px;
63        font-weight: bold;
64        padding: 0 25px;
65        margin-top: 30px;
66        display: -webkit-box;
67        display: -ms-flexbox;
68        display: flex;
69        -webkit-box-align: center;
70        -ms-flex-align: center;
71        align-items: center;
72        -webkit-box-pack: justify;
73        -ms-flex-pack: justify;
74        justify-content: space-between;
75        &:after {
76            content: "+";
77            font-size: 30px;
78        }
79        @include tab {
80            font-size: 20px;
81        }
82        &:hover {
83            cursor: pointer;
84        }
85    }
86    .active {
87        &:after {
88            content: "−";
89        }
90    }
91    .contWrap {
92        margin-right: 30px;
93        margin-left: 30px;
94        padding-top: 20px;
95        @include tab {
96            margin-right: 5px;
97            margin-left: 5px;
98        }
99        h5 {
100            font-size: 17px;
101            font-weight: bold;
102            margin-bottom: 15px;
103        }
104        .text {
105            display: -webkit-box;
106            display: -ms-flexbox;
107            display: flex;
108            -webkit-box-align: center;
109            -ms-flex-align: center;
110            align-items: center;
111            -webkit-box-pack: justify;
112            -ms-flex-pack: justify;
113            justify-content: space-between;
114            @include tab {
115                -webkit-box-orient: vertical;
116                -webkit-box-direction: normal;
117                -ms-flex-direction: column;
118                flex-direction: column;
119            }
120            p {
121                font-size: 14px;
122                font-weight: bold;
123                line-height: 2;
124                margin-right: 10px;
125                @include sp {
126                    font-size: 13px;
127                    line-height: 1.8;
128                }
129                @include tab {
130                    margin-right: 0;
131                    margin-bottom: 10px;
132                }
133            }
134            img {
135                @include pc {
136                    width: 250px;
137                }
138                @include tab {
139                    width: 300px;
140                }
141                @include sp {
142                    width: 280px;
143                }
144            }
145        }
146    }

jQuery
1/**
2* アコーディオンメニュー
3*/
4$(function () {
5    $(".title-acd").on("click", function () {
6        $(this).next().slideToggle();
7        $(this).toggleClass('active');
8    });
9});
10
11
12/**
13* サービスページアンカー
14*/
15// 着いた瞬間に開く
16jQuery(function () {
17    jQuery('.contWrap').hide();
18    jQuery('a[href^="#"').on('click', function () {
19        jQuery('.contWrap').hide();
20        jQuery(jQuery(this).attr('href')).next('.contWrap').show();
21    });
22});
23
24// スクロール
25jQuery(function () {
26    var headerHight = jQuery('header').outerHeight();
27    jQuery(".menu-01").click(function () {
28        const p = jQuery("#link-01").offset().top - headerHight;
29        jQuery('html,body').animate({ scrollTop: p }, '2000');
30        return false;
31    });
32    jQuery(".menu-02").click(function () {
33        const p = jQuery("#link-02").offset().top - headerHight;
34        jQuery('html,body').animate({ scrollTop: p }, '2000');
35        return false;
36    });
37    jQuery(".menu-03").click(function () {
38        const p = jQuery("#link-03").offset().top - headerHight;
39        jQuery('html,body').animate({ scrollTop: p }, '2000');
40        return false;
41    });
42    jQuery(".menu-04").click(function () {
43        const p = jQuery("#link-04").offset().top - headerHight;
44        jQuery('html,body').animate({ scrollTop: p }, '2000');
45        return false;
46    });
47    jQuery(".menu-05").click(function () {
48        const p = jQuery("#link-05").offset().top - headerHight;
49        jQuery('html,body').animate({ scrollTop: p }, '2000');
50        return false;
51    });
52    jQuery(".menu-06").click(function () {
53        const p = jQuery("#link-06").offset().top - headerHight;
54        jQuery('html,body').animate({ scrollTop: p }, '2000');
55        return false;
56    });
57    jQuery(".menu-07").click(function () {
58        const p = jQuery("#link-07").offset().top - headerHight;
59        jQuery('html,body').animate({ scrollTop: p }, '2000');
60        return false;
61    });
62    jQuery(".menu-08").click(function () {
63        const p = jQuery("#link-08").offset().top - headerHight;
64        jQuery('html,body').animate({ scrollTop: p }, '2000');
65        return false;
66    });
67});

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

回答1件

ベストアンサー

// 着いた瞬間に開く
jQuery(function () {
    jQuery('.contWrap').hide();
    jQuery('a[href^="#"').on('click', function () {
        jQuery('.contWrap').hide();
        jQuery(jQuery(this).attr('href')).next('.contWrap').show();
    });
});

↑この記述ではdomを読み込んだらhideを実行して、イベントリスナーをセットする、的な記述になるかと思います。
開閉動作をfunction化して
animateのあとの行に、それぞれ付け足せばよいかと思います。

如何でしょうか？

投稿2020/11/30 06:56

tomtomtomtom

総合スコア563

mo__fumi

2020/12/02 01:54

ご回答ありがとうございます！！お返事遅くなりすみません。以下のように書いてみましたが、意図とご相違ありませんでしょうか？ // スクロール jQuery(function () { var headerHight = jQuery('header').outerHeight(); jQuery(".menu-01").click(function () { const p = jQuery("#link-01").offset().top - headerHight; jQuery('html,body').animate({ scrollTop: p }, '2000'); jQuery(function () { jQuery('.contWrap').hide(); jQuery(jQuery(this).attr('href')).next('.contWrap').show(); }); return false; }); }); こちらで実行したところ、アンカーリンクへスクロールはするのですが、.contWrapが開かずコンテンツが見えない感じでした・・・こちらの書き方が違っていればご指摘願います＞＜

mo__fumi

2020/12/02 01:55

＜追記＞ /** * サービスページアンカー */ // 着いた瞬間に開くこちらのJSは消し、さらにCSSにて.contWrapを display: none; にした上で実行しました。

tomtomtomtom

2020/12/02 03:19

ご期待に添えず申し訳有りませんでした。お手数をおかけして、大変恐縮ですが、一旦もとに戻していただきたいです。それと、消すのではなく、コメントアウトでお願いします。 >意図とご相違ありませんでしょうか？ちょっと違います。それと、誠に申し訳有りません。勘違いしておりました。えーと + と - の切り替えは $(this).toggleClass('active'); でやられているように思いますつまり、コンテンツをクリックした時しか動作しません。なので、 $(".title-acd").removeClass("active"); を jQuery(jQuery(this).attr('href')).next('.contWrap').show();のまえに jQuery(jQuery(this).attr('href')).toggleClass('active'); を jQuery(jQuery(this).attr('href')).next('.contWrap').show();のあとに付け足してみて下さい。

mo__fumi

2020/12/03 15:42

おおお！！！こちらで完璧に理想通りの動きになりました・・・！！！大変助かりました、誠にありがとうございます！！m(_ _)m

tomtomtomtom

2020/12/03 15:47

無事解決できてホッとしました^^ また機会がありましたら宜しくお願いいたします。

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