場所でさがすのソースを表示

<templatestyles src="カテゴリー一覧/styles.css" />
<html>
<script>
// ページ読み込み後に実行
document.addEventListener('DOMContentLoaded', function() {
  const grid = document.querySelector('.category-grid');
  let currentExpandedPanel = null;
  
  // すべてのジャンルで探すボタンにクリックイベントを追加
  const toggleButtons = document.querySelectorAll('.genre-toggle');
  
  toggleButtons.forEach(button => {
    button.addEventListener('click', function(e) {
      e.preventDefault();
      
      const card = this.closest('.category-card');
      const cardId = card.id;
      const wasOpen = card.classList.contains('is-open');
      
      // 既存の展開パネルを削除
      if (currentExpandedPanel) {
        currentExpandedPanel.remove();
        currentExpandedPanel = null;
      }
      
      // すべてのカードを閉じる
      document.querySelectorAll('.category-card').forEach(c => {
        c.classList.remove('is-open');
      });
      
      // クリックしたカードがもともと閉じていた場合のみ開く
      if (!wasOpen) {
        card.classList.add('is-open');
        
        // サブジャンルの内容を取得
        const subgenresContent = card.querySelector('.subgenres').innerHTML;
        
        // カードの位置を取得して、同じ行の最後に展開パネルを挿入
        const allCards = Array.from(grid.children).filter(el => el.classList.contains('category-card'));
        const cardIndex = allCards.indexOf(card);
        
        // グリッドの列数を計算（ウィンドウ幅に基づく）
        const gridStyle = window.getComputedStyle(grid);
        const gridTemplateColumns = gridStyle.gridTemplateColumns.split(' ').length;
        
        // 同じ行の最後のカードのインデックスを計算
        const rowEndIndex = Math.floor(cardIndex / gridTemplateColumns) * gridTemplateColumns + gridTemplateColumns - 1;
        const insertAfterCard = allCards[Math.min(rowEndIndex, allCards.length - 1)];
        
        // 展開パネルを作成
        const expandedPanel = document.createElement('div');
        expandedPanel.className = 'subgenres-expanded';
        expandedPanel.innerHTML = subgenresContent;
        
        // 展開パネルを挿入
        insertAfterCard.after(expandedPanel);
        currentExpandedPanel = expandedPanel;
        
        // アニメーション用に少し遅延
        setTimeout(() => {
          expandedPanel.classList.add('is-visible');
        }, 10);
      }
    });
  });
  
  // ウィンドウリサイズ時に展開パネルの位置を再計算
  let resizeTimer;
  window.addEventListener('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      const openCard = document.querySelector('.category-card.is-open');
      if (openCard) {
        // 再度開き直す
        openCard.querySelector('.genre-toggle').click();
        openCard.querySelector('.genre-toggle').click();
      }
    }, 250);
  });
});//# sourceURL=foobar.js
</script>
</html>
川西市内の店舗・施設を「場所」から探せます。  
最寄り駅・エリアごとに情報を整理しています。

<div class="category-grid">
<div class="category-card" id="station">
<h3 class="category-title">最寄駅から探す</h3>
<div class="category-actions">
<html><a href="#station" class="genre-toggle">最寄り駅一覧を表示</a></html>
</div>
<div class="subgenres">
* [[川西能勢口駅]]
* [[雲雀丘花屋敷駅]]
* [[川西池田駅]]
* [[北伊丹駅]]
* [[絹延橋駅]]
* [[滝山駅]]
* [[鴬の森駅]]
* [[鼓滝駅]]
* [[多田駅]]
* [[平野駅]]
* [[一の鳥居駅]]
* [[畦野駅]]
* [[山下駅]]
* [[笹部駅]]
* [[日生中央駅]]
* [[妙見口駅]]
</div>
</div>

<div class="category-card" id="area">
<h3 class="category-title">エリアからさがす</h3>
<div class="category-actions">
<html><a href="#area" class="genre-toggle">エリア一覧を表示</a></html>
</div>
<div class="subgenres">
* [[川西南]]
* [[川西中央]]
* [[明峰]]
* [[多田]]
* [[緑台]]
* [[清和台]]
* [[東谷]]
</div>
</div>

<div class="category-card" id="facility">
<h3 class="category-title">施設から探す</h3>
<div class="category-actions">
<html><a href="#facility" class="genre-toggle">施設一覧を表示</a></html>
</div>
<div class="subgenres">
* [[アステ川西]]
* [[キセラ川西]]
</div>
</div>
</div>

※ 各駅・エリアページから、  
飲食店・美容・施設などのカテゴリー別一覧を見ることができます。

__目次非表示__