アコーディオンメニューで他のボタンを押したら開いていたものが閉じるようにしたい

タイトル１が押されたら.contents1の内容が開き、開いた状態でタイトル2を押したら開いていた.contents1が閉じて.contants2が開かれる（逆も同様）ということをしたいのですが、jQueryでの書き方がわかりません。
開閉のjQueryの記述をcontents1と2で分けていて、かつfadeToggleメソッドで開閉するようにしているから余計書き方がわからず...
方法がわかる方、助言いただけますと幸いです。またもっと良い書き方がある場合、ご教授いただけると嬉しいです。
よろしくお願いいたします。

html
1<header>
2    <div id="global-nav" class="visible-lg visible-md">
3        <ul class="global-nav-inner">
4            <li class="menu accordion-container">
5                <p class="article-title contents1-ttl">タイトル１</p>
6            </li>
7            <li class="menu accordion-container">
8                <p class="article-title contents2-ttl">タイトル２</p>
9            </li>
10        </ul>
11        <div class="accordion-content-pc contents1">
12            内容
13        </div>
14        <div class="accordion-content-pc contents2">
15            内容
16        </div>
17    </div>
18</header>

javascript
1if (window.matchMedia('(min-width: 992px)').matches) {
2        $('.contents1-ttl').on('click', function () {
3            $('.contents1').fadeToggle(500);
4        });
5        $('.contents2-ttl').on('click', function () {
6            $('.contents2').fadeToggle(500);
7        });
8
9      } else {
10        $('.article-title').on('click', function () {
11            $(this).next().slideToggle(500);
12            $(this).toggleClass('open');
13        });
14      }

追記

回答いただきありがとうございます！htmlをサーバーで確認させていただきました。
記述をし忘れていたのですが、

最初は内容が全て非表示の状態にする
タイトル１を押しても、contents1の内容が表示したり非表示にしたりできるようにする（２も同じ）

というようにもしたいです。こちらですとどのような記述方法になりますでしょうか？
注文が多く申し訳ございません。

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

回答1件

jQueryだと.is(":visible")で表示、非表示の状態が取得できるようです。
また、.fadeIn()で表示、.fadeOut()で非表示に出来ます。
以下のコードが参考になるかもしれません。

jQuery
1$(function () {
2    if (window.matchMedia("(min-width: 992px)").matches) {
3        //タイトル１, タイトル2, タイトル3, タイトル4を取得
4        $(".article-title").each(function (i, node) {
5            // 1,2,3,4に変換
6            var n = i + 1;
7            //タイトル１, タイトル2, タイトル3, タイトル4のノードをクリック
8            $(node).on("click", function (evt) {
9                //タイトルに一致する内容のノードが表示されている状態
10                if ($(".contents" + n).is(":visible")) {
11                } else {
12                    //タイトルに一致する内容のノードが非表示だった場合
13                    //内容をfadeInで表示する
14                    $(".contents" + n).fadeIn(500);
15                }
16                //その他の内容を全部fadeOutで非表示
17                $(".accordion-content-pc:not(.contents" + n + ")").fadeOut(500);
18            });
19        });
20    } else {
21        $(".article-title").on("click", function () {
22            $(this).next().slideToggle(500);
23            $(this).toggleClass("open");
24        });
25    }
26});

こちらはHTML全体です。テストできると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8" />
5        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6        <title>Document</title>
7        <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
8        <script>
9            $(function () {
10                if (window.matchMedia("(min-width: 992px)").matches) {
11                    //タイトル１, タイトル2, タイトル3, タイトル4を取得
12                    $(".article-title").each(function (i, node) {
13                        // 1,2,3,4に変換
14                        var n = i + 1;
15                        //タイトル１, タイトル2, タイトル3, タイトル4のノードをクリック
16                        $(node).on("click", function (evt) {
17                            //タイトルに一致する内容のノードが表示されている状態
18                            if ($(".contents" + n).is(":visible")) {
19                            } else {
20                                //タイトルに一致する内容のノードが非表示だった場合
21                                //内容をfadeInで表示する
22                                $(".contents" + n).fadeIn(500);
23                            }
24                            //その他の内容を全部fadeOutで非表示
25                            $(".accordion-content-pc:not(.contents" + n + ")").fadeOut(500);
26                        });
27                    });
28                } else {
29                    $(".article-title").on("click", function () {
30                        $(this).next().slideToggle(500);
31                        $(this).toggleClass("open");
32                    });
33                }
34            });
35        </script>
36    </head>
37    <body>
38        <header>
39            <div id="global-nav" class="visible-lg visible-md">
40                <ul class="global-nav-inner">
41                    <li class="menu accordion-container">
42                        <p class="article-title contents1-ttl">タイトル１</p>
43                    </li>
44                    <li class="menu accordion-container">
45                        <p class="article-title contents2-ttl">タイトル２</p>
46                    </li>
47                    <li class="menu accordion-container">
48                        <p class="article-title contents3-ttl">タイトル３</p>
49                    </li>
50                    <li class="menu accordion-container">
51                        <p class="article-title contents4-ttl">タイトル４</p>
52                    </li>
53                </ul>
54                <div class="accordion-content-pc contents1">
55                    内容1
56                </div>
57                <div class="accordion-content-pc contents2">
58                    内容2
59                </div>
60                <div class="accordion-content-pc contents3">
61                    内容3
62                </div>
63                <div class="accordion-content-pc contents4">
64                    内容4
65                </div>
66            </div>
67        </header>
68    </body>
69</html>
70

投稿2020/06/01 12:21

fake_shibe

総合スコア806

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

アコーディオンメニューで他のボタンを押したら開いていたものが閉じるようにしたい

追記

関連した質問