備忘録

■アコーディオン：異なる階層にある要素を連動させる方法
一般的に、アコーディオンはクリックする要素（トリガー）とそのクリックで開閉する要素（コンテンツ）が同じ親要素内にあることが多いですが、今回は異なる階層にある要素を連動させる方法を解説します。

1.HTML構造
まず、トリガーとコンテンツを異なる階層に配置したHTMLを記述します。トリガー要素に、どのコンテンツと連動させるかを指定するためのカスタムデータ属性（例：data-accordion-target）を設定するのがポイントです。

<nav>
  <ul>
    <li>
      <a href="#" class="js-accordion-trigger" data-accordion-target="#content-1">アコーディオン1を開く</a>
    </li>
    <li>
      <a href="#" class="js-accordion-trigger" data-accordion-target="#content-2">アコーディオン2を開く</a>
    </li>
  </ul>
</nav>


<main>
  <div class="accordion-container">
    <div id="content-1" class="js-accordion-content accordion-content">
      <p>コンテンツ1の内容です。</p>
    </div>
    <div id="content-2" class="js-accordion-content accordion-content">
      <p>コンテンツ2の内容です。</p>
    </div>
  </div>
</main>

2.CSSで初期状態を非表示にする
jQueryの.slideUp()と.slideDown()は、要素の表示状態を自動で切り替えるため、CSSでdisplay: none;を設定します。

.js-accordion-content {
display: none;
}

3.jQueryを使用したJavaScript
.slideUp()と.slideDown()を使用して、スムーズな開閉アニメーションを実現します。

$(document).ready(function() {

// クリックイベントの設定
$('.js-accordion-trigger').on('click', function(e) {
e.preventDefault();

const target = $($(this).data('accordion-target'));
const isVisible = target.is(':visible');

// 他のアコーディオンをすべて閉じる
$('.js-accordion-content').slideUp(300);
$('.js-accordion-trigger').removeClass('is-active');

if (isVisible) {
// 現在開いている場合：閉じる
target.slideUp(300);
$(this).removeClass('is-active').addClass('is-close');
} else {
// 現在閉じている場合：開く
target.slideDown(300);
$(this).addClass('is-active').removeClass('is-close');
}
});

});

■コードの解説
$(document).ready(function() { … });：ドキュメントが完全に読み込まれてからコードを実行します。

$(‘.js-accordion-trigger’).on(‘click’, function(e) { … });：クリックイベントを設定します。

const target = $($(this).data(‘accordion-target’));：クリックされたトリガーの data-accordion-target 属性から、連動するコンテンツ要素を jQuery オブジェクトとして取得します。

const isVisible = target.is(‘:visible’);：jQuery の .is(‘:visible’) メソッドで、要素が現在表示されているかどうかを判定します。

$(‘.js-accordion-content’).slideUp(300);：他のアコーディオンをすべて閉じます。

if (isVisible) ブロック：
target.slideUp(300);：開いているアコーディオンを、300ミリ秒かけて閉じます。

$(this).removeClass(‘is-active’).addClass(‘is-close’);：トリガーに is-close クラスを追加して、アイコンなどを変更します。

else ブロック：
target.slideDown(300);：閉じているアコーディオンを、300ミリ秒かけて開きます。

$(this).addClass(‘is-active’).removeClass(‘is-close’);：トリガーに is-active クラスを追加します。

このコードは、クリックしたアコーディオンを開閉し、同時に他のアコーディオンをすべて閉じる機能も備えています。