jQueryだと.is(":visible")で表示、非表示の状態が取得できるようです。
また、.fadeIn()で表示、.fadeOut()で非表示に出来ます。
以下のコードが参考になるかもしれません。
jQuery
1$(function () {
2 if (window.matchMedia("(min-width: 992px)").matches) {
3 //タイトル1, タイトル2, タイトル3, タイトル4を取得
4 $(".article-title").each(function (i, node) {
5 // 1,2,3,4に変換
6 var n = i + 1;
7 //タイトル1, タイトル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 //タイトル1, タイトル2, タイトル3, タイトル4を取得
12 $(".article-title").each(function (i, node) {
13 // 1,2,3,4に変換
14 var n = i + 1;
15 //タイトル1, タイトル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">タイトル1</p>
43 </li>
44 <li class="menu accordion-container">
45 <p class="article-title contents2-ttl">タイトル2</p>
46 </li>
47 <li class="menu accordion-container">
48 <p class="article-title contents3-ttl">タイトル3</p>
49 </li>
50 <li class="menu accordion-container">
51 <p class="article-title contents4-ttl">タイトル4</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
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。