kdcsライブラリー

多くの選択肢をモーダルメニューに入れるとメニューが縦長になりすぎてしまうのでアコーディオン化して閉じておく処理

例は、ブランド一覧
html

<?php /* gn ブランド一覧ここから---------------------------------------------------------- */ ?>
<div class="gnBrandList">
<button class="gnBrandBtn">BRAND LIST</button>
<ul class="gnBrandMenu">
<li><a href="<?php echo home_url(); ?>/items_cat/cafering" title="CAFERING">CAFERING</a></li>
<li><a href="<?php echo home_url(); ?>/items_cat/cafering_k" title="CAFERING K">CAFERING K</a></li>
<li><a href="<?php echo home_url(); ?>/items_cat/hoshinosuna" title="HOSHInoSUNA">HOSHInoSUNA 星の砂</a></li>
<li><a href="<?php echo home_url(); ?>/items_cat/belethe" title="BELETHE">BELETHE</a></li>
<li><a href="<?php echo home_url(); ?>/items_cat/k_uno" title="disney-treasure">K.UNO "Disney Treasure"</a></li>
<li><a href="<?php echo home_url(); ?>/items_cat/sakura_diamond" title="さくらダイヤモンド">さくらダイヤモンド</a></li>
<li><a href="<?php echo home_url(); ?>/items_cat/fika" title="fika">fika</a></li>
<li><a href="<?php echo home_url(); ?>/items_cat/lapage" title="LAPAGE">LAPAGE</a></li>
<li><a href="<?php echo home_url(); ?>/items_cat/nina_ricci" title="NINA RICCI">NINA RICCI</a></li>
<li><a href="<?php echo home_url(); ?>/items_cat/private_beach" title="ハワイアンジュエリー「プライベートビーチ」">private beach</a></li>
<li><a href="<?php echo home_url(); ?>/items_cat/lor" title="L'or">L'or</a></li>
<li><a href="<?php echo home_url(); ?>/items_cat/ptau" title="ptau">ptau</a></li>
<li><a href="<?php echo home_url(); ?>/items_cat/truelove" title="True Love">True Love</a></li>
<li><a href="<?php echo home_url(); ?>/items_cat/fujita_original_selection" title="Fujita Original Selection">Fujita Original Selection</a></li>
</ul>
</div><!--/.gnBrandList-->
<?php /* gn ブランド一覧ここまで---------------------------------------------------------- */ ?>

css

/* ▼アコーディオン --------------------*/
.gnBrandList {
    width: 100%;
    margin-bottom: 20px;
}
/* 初期状態は閉じる */
.gnBrandMenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 0;
    margin: 0;
}
.gnBrandMenu li {
    list-style: none;
}
.gnBrandMenu li a {
    display: block;
    padding: 8px 10px;
    border-bottom: 1px solid #ddd;
    text-decoration: none;
    color: #333;
}
.gnBrandBtn {
    width: 100%;
    padding: 10px;
    background: #937a6b;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    position: relative;
}
/* ▼ の矢印を疑似要素で作る */
.gnBrandBtn::after {
    content: "▼";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}
/* 開いた時に矢印を回転 */
.gnBrandBtn.active::after {
    transform: translateY(-50%) rotate(180deg);
}
/* アコーディオン本体 */
.gnBrandMenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease;
    padding-left: 0;
    margin: 0;
}

javascript

// アコーディオン
document.querySelector('.gnBrandBtn').addEventListener('click', function() {
  const menu = document.querySelector('.gnBrandMenu');

  if (menu.classList.contains('open')) {
    // 閉じるとき
    menu.style.maxHeight = null;
  } else {
    // 開くとき：中身の高さを自動で取得
    menu.style.maxHeight = menu.scrollHeight + "px";
  }

  menu.classList.toggle('open');
  this.classList.toggle('active'); // ← 矢印回転
});

※【重要】モーダルメニューを閉じるときにアコーディオンを閉じた状態にしたいのでモーダルメニュー開閉のjavascriptに「モーダル閉じたらアコーディオンも閉じる」を組み込んだコードにする必要がある。

こちらが組み込んだモーダルのjs

// 新スマホ グローバルメニュー -------------------------------------------------

var trigger = document.querySelector('.globalMenu');
var closeButtons = document.querySelectorAll('.closeButton');
var body = document.body;
var modal = document.getElementById('globalNavArea');
let scrollPosition = 0;

// ★ アコーディオンを閉じる処理（チラつき防止付き）
function resetAccordion() {
  const menu = document.querySelector('.gnBrandMenu');
  const btn = document.querySelector('.gnBrandBtn');

  if (!menu || !btn) return;

  // ★ transition を一時的に無効化（チラつき防止）
  menu.style.transition = 'none';

  // アコーディオンを閉じる
  menu.classList.remove('open');
  btn.classList.remove('active');
  menu.style.maxHeight = null;

  // ★ 次のフレームで transition を元に戻す
  requestAnimationFrame(() => {
    menu.style.transition = '';
  });
}

// モーダルを閉じる処理
function closeModal() {
  trigger.classList.remove('is-active');
  body.classList.remove('is-nav-opened');
  body.classList.add('is-nav-close');

  body.style.top = '';
  window.scrollTo(0, scrollPosition);

  // ★ モーダルを閉じたらアコーディオンも閉じる
  resetAccordion();
}

// モーダルを開く処理
function openModal() {
  scrollPosition = window.scrollY;

  trigger.classList.add('is-active');

  if (body.classList.contains('is-nav-close')) {
    body.classList.remove('is-nav-close');
  }

  body.classList.add('is-nav-opened');

  body.style.top = `-${scrollPosition}px`;
  modal.scrollTop = 0;
}

// トリガークリック
trigger.addEventListener('click', function () {
  if (body.classList.contains('is-nav-opened')) {
    closeModal();
  } else {
    openModal();
  }
});

// closeButton クリックでも閉じる
closeButtons.forEach(btn => {
  btn.addEventListener('click', closeModal);
});