「場所でさがす」の版間の差分

2026年1月29日 (木) 12:30時点における版

川西市内の店舗・施設を「場所」から探せます。最寄り駅・エリアごとに情報を整理しています。

最寄駅から探す

エリアからさがす

▶ エリア一覧を表示
◆ 川西中央エリア栄町小花中央町 ◆ 多田・清和台エリア多田院清和台向陽台 ◆ けやき坂・緑台エリアけやき坂緑台 ◆ 東谷・山下エリア山下町笹部見野 ◆ 北部・山間エリア黒川国崎

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

@@ 1行目: / 1行目: @@
 <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);
+  });
+});
+</script>
+</html>
 川西市内の店舗・施設を「場所」から探せます。
 最寄り駅・エリアごとに情報を整理しています。