ページ内アンカーリンクでアコーディオンを開きたい

ページ内のアンカーリンク(href="#article")をクリックすると
[id="article"]に移動し、アコーディオンが開くという動きを実装したいです。
(アコーディオンが先でもアンカーが先でも大丈夫です！)

アコーディオン部分はアンカーでも開くし、アコーディオン自体のクリックでも開くようにしたいです。
開閉をわかりやすくしたのでアコーディオン右には画像で+/-もつけています。

ページ内に他にもアンカーリンクを利用するため
ユニークな記述をお願いします。

下記の記述でアコーディオンだけの開閉は問題ありませんが
アンカーを押してもアコーディオンが開きませんでした。

どこの記述が問題ありますでしょうか。。

html

<div class="fee_inner01">
 <div class="fee_article_top">
  <ul>
   <li>＊1<a href="#article" id="article-anc_01" class="fee_article_btn">見出し01</a></li>
   <li>＊2 <a href="#article" id="article-anc_02" class="fee_article_btn">見出し02</a></li>
   <li>＊3 <a href="#article" id="article-anc_03" class="fee_article_btn">見出し03</a></li>
  </ul>
 </div>
 <div class="fee_article fee_article mgb-20">
  <div class="fee_article_title ac_btn" id="article">注意事項</div>
  <div class="accordion_in">
   <p>＊1　テキストが入ります</p>
   <p>＊2　テキストが入ります</p>
   <p>＊3　テキストが入ります</p>
  </div>
 </div>
</div>

css

.fee_article_top ul {
    padding: 12px;
    margin: 15px 0 20px;
    position: relative;
}
.fee_article_in {
    padding: 0 5% 20px;
}
.ac_btn {
    position: relative;
}
.ac_btn::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url(../images/ac_plus.png) no-repeat;
    background-size: 18px;
    position: absolute;
    right: 20px;
    top: 16px;
}
.ac_btn.open::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url(../images/ac_minus.png) no-repeat;
    background-size: 18px;
    position: absolute;
    right: 20px;
    top: 16px;
}

js

$(function () {
  $(".fee_article_title").click(function () {
    $(this).toggleClass("open").next().slideToggle("normal");
  });
});

$(function () {
  $('.fee_article_in').css("display", "none");
  $('.fee_inner01 a[href^="#"]').click(function () {
		$(".fee_article_title").addClass("open");
    $(".fee_article_in").css("display", "block");
    var speed02 = 500;
    var href02 = $(this).attr("href");
    var target02 = $(href02 == "#" || href02 == "" ? 'html' : href02);
    var position02 = target02.offset().top;
    $("html, body").animate({
      scrollTop: position02
    }, speed02, "swing");
    return false;
  });
});

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

回答3件

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="robots" content="noindex,nofollow" />
7  <title>homePage</title>
8  <style>
9    ul {
10      margin: 0px 0 10px 0;
11      padding: 0;
12      list-style: none;
13    }
14
15    li {
16      display: block;
17
18    }
19
20    strong {
21      padding: 0;
22      margin: 0;
23      font-size: 20px;
24      display: inline-block;
25      vertical-align: top;
26      line-height: 1;
27    }
28
29    a {
30      cursor: pointer;
31    }
32
33    /*overflow:hiddenを設定することで高さが変われば*/
34    /*はみ出したリスト部分は表示されなくなる*/
35    .accordion {
36      position: absolute;
37      overflow: hidden;
38      height: 0;
39      margin: 0;
40      padding: 0;
41    }
42
43    /*toggleアニメを0%から実施し終了後もスタイルは変わらない*/
44    /*アニメーションにかかる時間は0.3秒*/
45    .open {
46      animation: toggle 0.3s forwards;
47    }
48
49    /*toggleアニメを100%から実施し終了後もスタイルは変わらない*/
50    /*アニメーションにかかる時間は0.3秒*/
51    .close {
52      animation: toggle 0.3s forwards reverse;
53    }
54
55    /*高さを徐々に変更するアニメーション*/
56    @keyframes toggle {
57      0% {
58        height: 0;
59      }
60
61      25% {
62        height: 17.5px;
63      }
64
65      50% {
66        height: 35px;
67      }
68
69      75% {
70        height: 62.5px;
71      }
72
73      100% {
74        height: 70px;
75      }
76    }
77
78    button {
79      width: 20px;
80      height: 20px;
81      border: none;
82      cursor: pointer;
83      display: inline-block;
84      vertical-align: top;
85      line-height: 0;
86      outline: none;
87      padding: 0;
88      appearance: none;
89      background-color: transparent;
90      background-size: cover;
91      background-position: center;
92    }
93
94    .plus {
95      background-image: url(https://f.easyuploader.app/eu-prd/upload/20200721115155_393966734648496e6465.png);
96    }
97
98    .minus {
99      background-image: url(https://f.easyuploader.app/eu-prd/upload/20200721115155_416d3465584d65733531.png);
100    }
101  </style>
102
103</head>
104
105<body>
106  <ul>
107    <li>＊1 <a href="#article">見出し01</a></li>
108    <li>＊2 <a href="#article">見出し02</a></li>
109    <li>＊3 <a href="#article">見出し03</a></li>
110  </ul>
111  <strong id="alert">注意事項</strong>
112  <button id="button" class="plus" type="button"></button>
113  <ul id="accordionJs" class="accordion">
114    <li>＊1　テキストが入ります</li>
115    <li>＊2　テキストが入ります</li>
116    <li>＊3　テキストが入ります</li>
117  </ul>
118  <script>
119    // アコーディオンとして開閉するulタグを定義
120    const accordion = document.getElementById("accordionJs");
121
122    // アコーディオンが開く時に実行する関数を定義
123    const open = () => {
124      // アコーディオンのクラスにcloseが含まれていれば削除
125      if (accordion.classList.contains("close")) {
126        accordion.classList.remove("close");
127      }
128      // アコーディオンの高さを0にする
129      accordion.style.height = "0";
130      // 200ミリ秒後に
131      setTimeout(() => {
132        // ボタンの背景をマイナスにし
133        button.classList.add("minus");
134        // 開くときのcssアニメーションを実行するためopenクラスを付与。
135        accordion.classList.add("open");
136      }, 200);
137    }
138
139    // アコーディオンが閉まる時に実行する関数を定義
140    const close = () => {
141      // 閉めるときはopenクラスが確定で存在するため削除
142      accordion.classList.remove("open");
143      // アコーディオンの高さを70pxにする
144      accordion.style.height = "70px";
145      // 200ミリ秒後に
146      setTimeout(() => {
147        // ボタンの背景をプラスにし
148        button.classList.remove("minus");
149        // 閉じるときのcssアニメーションを実行するためcloseクラスを付与。
150        accordion.classList.add("close");
151      }, 200);
152    }
153    // ボタンをクリックしたときの動作を関数として定義
154    const clickBtn = (btn) => {
155      //ボタンをクリックした場合
156      btn.addEventListener("click", () => {
157        //アコーディオンの高さが0ならば 上で定義したopen関数を違うのであればclose関数を実施
158        accordion.clientHeight == 0 ? open() : close();
159      });
160    }
161    // アコーディオン開閉ボタンを定義
162    const button = document.getElementById("button");
163    // 引数としてbuttonを渡し上で定義したclickBtn関数を実行
164    clickBtn(button);
165    // 各aタグをクリックした時に実行する関数
166    const clickA = (a) => {
167      //各aタグをクリックした場合
168      a.addEventListener("click", () => {
169        //アコーディオンの高さが0であるならば
170        if (accordion.clientHeight == 0) {
171          //上記で定義したopen関数を実行
172          open();
173        }
174      })
175    }
176
177    //0番目のaタグを定義
178    const a0 = document.getElementsByTagName("a")[0];
179    //1番目のaタグを定義
180    const a1 = document.getElementsByTagName("a")[1];
181    //2番目のaタグを定義
182    const a2 = document.getElementsByTagName("a")[2];
183
184    //引数としてa0を渡し上で定義したclickA関数を実行
185    clickA(a0);
186    //引数としてa1を渡し上で定義したclickA関数を実行
187    clickA(a1);
188    //引数としてa2を渡し上で定義したclickA関数を実行
189    clickA(a2);
190
191  </script>
192</body>
193
194</html>

投稿2020/07/21 04:35

Jon_do

総合スコア1373

okama

2020/07/24 12:35

追記いただきありがとうございました。これで書き換えて試してみますm(><)m

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

jqueryはよくわからないので素のJavascriptで再現してみました。
面倒くさいので全部HTMLに書き込んでいるため、コピペするだけで動きます。
ソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="robots" content="noindex,nofollow" />
7    <title>homePage</title>
8    <style>
9        ul {
10            margin: 0px 0 10px 0;
11            padding: 0;
12            list-style: none;
13        }
14
15        li {
16            display: block;
17
18        }
19
20        a {
21            cursor: pointer;
22        }
23
24        .wrapAccordion {
25            position: relative;
26            width: 200px;
27            height: 70px;
28        }
29
30        .accordion {
31            position: absolute;
32            overflow: hidden;
33            height: 0;
34            margin: 0;
35            padding: 0;
36        }
37
38        .show {
39            animation: toggle 0.3s both;
40
41        }
42
43        .hide {
44            animation: toggle 0.3s both reverse;
45        }
46
47        button {
48            width: 20px;
49            height: 20px;
50            line-height: 0;
51            margin: 0;
52            padding: 0;
53            font-size: 20px;
54        }
55
56        @keyframes toggle {
57            0% {
58                height: 0;
59            }
60
61            25% {
62                height: 25%;
63            }
64
65            50% {
66                height: 50%;
67            }
68
69            75% {
70                height: 75%;
71            }
72
73            100% {
74                height: 100%;
75            }
76        }
77    </style>
78
79</head>
80<body>
81    <ul>
82        <li>＊1 <a href="#article">見出し01</a></li>
83        <li>＊2 <a href="#article">見出し02</a></li>
84        <li>＊3 <a href="#article">見出し03</a></li>
85    </ul>
86    <strong id="alert">注意事項</strong>
87    <button type="button">+</button>
88    <div class="wrapAccordion">
89        <ul id="accordionJs" class="accordion">
90            <li>＊1　テキストが入ります</li>
91            <li>＊2　テキストが入ります</li>
92            <li>＊3　テキストが入ります</li>
93        </ul>
94    </div>
95    <script>
96        const accordion = document.getElementById("accordionJs");
97        const clickBtn = (btn) => {
98            btn.addEventListener("click", () => {
99                if (accordion.clientHeight == 0) {
100                    accordion.classList.remove("hide");
101                    accordion.style.height = "0";
102                    setTimeout(() => {
103                        accordion.classList.add("show");
104                    }, 200);
105                } else {
106                    accordion.classList.remove("show");
107                    accordion.style.height = "100%";
108                    setTimeout(() => {
109                        accordion.classList.add("hide");
110                    }, 200);
111                }
112            });
113        }
114
115        const button = document.getElementsByTagName("button")[0];
116        const a0 = document.getElementsByTagName("a")[0];
117        const a1 = document.getElementsByTagName("a")[1];
118        const a2 = document.getElementsByTagName("a")[2];
119        clickBtn(button);
120        clickBtn(a0);
121        clickBtn(a1);
122        clickBtn(a2);
123    </script>
124</body>
125</html>

投稿2020/07/20 13:55

Jon_do

総合スコア1373

okama

2020/07/21 01:49

コメントいただきありがとうございます。普段書いたことのない記述なため理解の乏しく申し訳ないのですが、アンカーリンクをクリックした際、+ボタンの画像が-ボタンになるようcssで記述しておりました。それは可能でしょうか？アンカーリンクをクリックした際はアコーディオンは開く動作のみで閉じる動作はアコーディオン自体のクリック時のみの動作にしたいのですが可能でしょうか。。

Jon_do

2020/07/21 04:37

可能です。下の回答のコードを先日と同様にそのままhtmlファイルにペーストしたら動作するようにしてあります。

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

リンクをクリックした時にURLに#articleが付与されます。

URLから#articleが取得できる関数があるので該当するアコーディオンメニューを開く様にJSファイルにて関数を追記すればOKだと思います。

実行タイミングとしては、クリックイベント時と初期リロード時です。

投稿2020/07/17 18:16

FrontEnd_Japan

総合スコア271

okama

2020/07/18 02:42

コメントいただきありがとうございます！＞URLから#articleが取得できる関数があるので該当するアコーディオンメニューを開く様にJSファイルにて関数を追記すればOKだと思います。＞実行タイミングとしては、クリックイベント時と初期リロード時です。コメントいただいた箇所ですが下記の記述箇所がその指定に当たるつもりで書いたのですが、これでは何故ダメなのでしょうか。。「アンカーリンクをクリックすると.fee_article_titleにclass名"open"をつける、さらに.fee_article_inにはcssで"display", "block"を付与する」 $('.fee_inner01 a[href^="#"]').click(function () { $(".fee_article_title").addClass("open"); $(".fee_article_in").css("display", "block");

FrontEnd_Japan

2020/07/18 02:59

まずはアコーディオンを開くための処理が混在しているので、統一したほうが良いです。現在アコーディオンを開く動作は、・slideToggle ・JSでスタイル操作（display: none; and display: block;）・JSでクラスを付与（addClass("open")） Jqueryを用いて単純にアコーディオンを開く開かないを実装する場合は、slideDown, slideUp, hide, show が関数で用意されているのでこちらを使用することをオススメします。

okama

2020/07/20 01:05 編集

初歩的な質問ばかりで恐れ入りますが、、、混同した記述のせいで他の動作に影響が出ているということでしょうか？ $(".fee_article_title").addClass("open"); $(".fee_article_in").css("display", "block"); → $(.fee_article_title).toggleClass("open").next().slideToggle("normal"); この記述に変更しようと思います。

FrontEnd_Japan

2020/07/20 01:08

toggleClass("open")というのがどういった意味をお持ちかご存知でしょうか。

okama

2020/07/20 01:23

"open"のクラス名を追加/削除するという宣言だと認識しております。 .fee_article_titleはクリック時に必ずアコーディオンが開いてアンカーリンクになって欲しいので「クリックしたら閉じる」というのはダメですね。。なのでこのような時は $(.fee_article_title).toggleClass("open").next().slideToggle("normal"); → $(.fee_article_title).addClass("open").next().slideDown("normal"); が良いでしょうか。

FrontEnd_Japan

2020/07/20 02:47

説明足らずで申し訳ございません>< slideDown()とslideToggle()自体が開く動作がありますので、toggleClass("open")とaddClass("open")は不要かと思います。ページ内でアコーディオンを開きたい場合は、slideDown()で開く。他ページから遷移してきた時にアコーディオンを開いた状態にしたい場合は、show()で開く方法が良いかと思います。

okama

2020/07/20 03:01

こちらこそすみません・・今回は他ページから遷移してきた場合は想定しておりません。同一ページ内でのアンカーリンクなので同一ページ内にある「アンカーリンクをクリックした際にアコーディオンが開き#articleに遷移する」というのが今回の目的です。。

FrontEnd_Japan

2020/07/20 03:07

なるほどですね！失礼しました。質問を理解しておりませんでした。アンカーリンクをクリックした場合は、既にアコーディオンが開いているのでUX上望ましいので、show()で開くのがオススメです。通常のアコーディオンはslideUp(), slideDown()で開閉するのがオススメです。 slideToggleは自動的に開閉状態を検知して開閉をするので、明示的にslideUp, slideDownを用いるのが良いです。

okama

2020/07/20 03:32

最初の記述でも、今回ご教授いただいたshow()の書き方でも、ローカル上問題なく動作確認できるのですが実際に商用にアップしクリックすると一度ページがリロードされてしまい、URLの後ろに#articleがつくだけでアコーディオンが開かれませんでした。。アンカーとアコーディオンがうまく噛み合ってない？順序がおかしい？のかなと思いました。うまく説明できないのですが(泣) 下記で試してみました。 $(function () { $('.fee_article_in').hide(); $('.fee_inner01 a[href^="#"]').on('click', function() { $('.fee_article_title').addClass("open").next().show(); var speed02 = 500; var href02 = $(this).attr("href"); var target02 = $(href02 == "#" || href02 == "" ? 'html' : href02); var position02 = target02.offset().top; $("html, body").animate({ scrollTop: position02 }, speed02, "swing"); return false; }); }); 補足： .on('click', function() に変えてみたのですが特に関係なかったです・・

FrontEnd_Japan

2020/07/20 03:38

その商用のページはご共有いただけたりできますか？？？

FrontEnd_Japan

2020/07/20 03:56

サンプルコードを書いてみました！ https://codepen.io/FrontEnd_Japan/pen/yLeGLWG

okama

2020/07/20 04:23

すみませんわざわざ..!!ありがとうございます(泣) codepenで見た所まさに理想だったのですが、ご教授いただいたものそのまま実際に記述してもアコーディオンが開きませんでした。。アンカーのクリックではなくアコーディオン自体の開閉もダメでした。。試しにjqueryを変えてみたのですがそれでもダメでした。。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 私、初歩的に何か間違ってますかね・・プラグインなど利用されていないですよね？ jqueryの読み込みと記述だけでいいのですよね。。すみません。。。

FrontEnd_Japan

2020/07/20 04:42

あらら。何ででしょうか。。。プラグインは何も使用しておりません。 Jqueryの読み込みのみです。

okama

2020/07/20 10:35

一部変更してローカルで正常に確認できましたがやはり実際に商用にアップしクリックすると一度ページがリロードされてしまい、URLの後ろに#articleがつくだけでアコーディオンが開かれませんでした。。色々とご提案いただいたのにすみません>< 念のため、下記修正後のものです。 ▼HTML <div class="fee_inner01"> <div class="fee_article_top"> <ul> <li>＊1<a href="#article" id="article-anc_01" class="fee_article_btn">見出し01</a></li> <li>＊2 <a href="#article" id="article-anc_02" class="fee_article_btn">見出し02</a></li> <li>＊3 <a href="#article" id="article-anc_03" class="fee_article_btn">見出し03</a></li> </ul> </div> <div class="fee_article fee_article mgb-20"> <div id="article" class="notification js-toggle"> <div class="fee_article_title ac_btn">注意事項</div> <div class="fee_article_in js-toggleContents"> <p>＊1　テキストが入ります</p> <p>＊2　テキストが入ります</p> <p>＊3　テキストが入ります</p> </div> </div> </div> </div> ▼JS $(function () { // 通常クリック時 $('.js-toggle').on('click', function () { $('.js-toggleContents').slideToggle(); }); // ページ内遷移時 $('a[href^="#"]').click(function () { var speed = 500; var href = $(this).attr("href"); // articleがクリックされた場合は、対象の要素を開いた状態にする if (href === "#article") { $('.js-toggleContents').show(); } var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({ scrollTop: position }, speed, "swing"); return false; }); });

FrontEnd_Japan

2020/07/20 11:42

ページ内リンクの指定を、[ページパス/アンカーリンク]にするとどうでしょうか？ <a href=/hoge/#article" id="article-anc_01" class="fee_article_btn">見出し01</a>

okama

2020/07/21 01:47

試してみます！

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

あなたの回答