開閉項目（アコーディオン）
デモ
押してください
ありがとうございます！
あなたは１番目のアイテムを開きました！
押してください
ありがとうございます！
あなたは２番目のアイテムを開きました！
押してください
ありがとうございます！
あなたは３番目のアイテムを開きました！
JSコードコピー
使い方
HTMLでは隣接する２つの要素が必要になります。
１つ目がトリガー要素です。
２つ目が開閉対象です。
１つ目のトリガー要素にdata-jscopyand="accordion"を付与してください。
解説
このアコーディオン機能は１画面で複数の設置を想定しているため、document.querySelectorAllでトリガーとなる全ての要素を取得し、変数に格納します。
取得した全トリガー要素に対して反復処理を行っていきます。
トリガー要素に隣接する次の要素をアコーディオンの本文とし、初期状態を非表示にします。
トリガー要素が押された時の処理を登録します。
displayスタイルが既に指定されていれば消す、指定されてなければnoneを付与する、という内容です。
ヘルプ・コンタクト
機能に関するご質問は、このページの下部に表示されている Twitter
のアイコンから Twitter に遷移後、 DM 等でご連絡ください。
導入サポートやカスタマイズも有償にてお受け致しますので、 DM
等でご連絡ください。