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

ビジュアルウィキテキスト

2026年2月3日 (火) 18:49時点における最新版

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

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

@@ 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);
+  });
+});//# sourceURL=foobar.js
+</script>
+</html>
 川西市内の店舗・施設を「場所」から探せます。
 最寄り駅・エリアごとに情報を整理しています。
@@ 11行目: / 92行目: @@
 <div class="subgenres">
 * [[川西能勢口駅]]
+* [[雲雀丘花屋敷駅]]
 * [[川西池田駅]]
-* [[雲雀丘花屋敷駅]]
+* [[北伊丹駅]]
-* [[山下駅]]
+* [[絹延橋駅]]
-* [[畦野駅]]
+* [[滝山駅]]
+* [[鴬の森駅]]
 * [[鼓滝駅]]
 * [[多田駅]]
 * [[平野駅]]
-* [[鶯の森駅]]
-* [[絹延橋駅]]
 * [[一の鳥居駅]]
+* [[畦野駅]]
+* [[山下駅]]
 * [[笹部駅]]
-* [[光風台駅]]
+* [[日生中央駅]]
-* [[ときわ台駅]]
 * [[妙見口駅]]
 </div>
 </div>
-== エリアからさがす ==
+<div class="category-card" id="area">
+<h3 class="category-title">エリアからさがす</h3>
-{| class="wikitable mw-collapsible mw-collapsed" style="width:100%;"
+<div class="category-actions">
-! style="font-size:1.1em; padding:12px;" | ▶ エリア一覧を表示
+<html><a href="#area" class="genre-toggle">エリア一覧を表示</a></html>
-|-
+</div>
-| style="padding:15px;" |
+<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>
-* [[国崎]]
-|}
-----
 ※ 各駅・エリアページから、
 飲食店・美容・施設などのカテゴリー別一覧を見ることができます。
+__目次非表示__

2026年2月3日 (火) 18:49時点における最新版

最寄駅から探す

エリアからさがす

施設から探す