FAQ アコーディオン トラブルシューティングガイド

✅ 修正内容

1. JavaScriptエラーの解消

• 問題: consultationFormの重複宣言エラー
• 解決: script.jsを完全にリファクタリングし、関数型のアプローチで整理

2. FAQアコーディオンの動作修正

• 問題: FAQをクリックしても開閉しない
• 解決:
  • CSSスタイルの追加（.faq-item, .faq-question, .faq-answer）
  • JavaScriptイベントリスナーの適切な設定
  • Feather Iconsの再初期化処理

3. スタイルの改善

• アクティブ状態の視覚的フィードバック
• スムーズなアニメーション（0.4秒）
• モバイル対応

🔍 動作確認方法

1. ローカルで確認

# Jekyllサーバーを起動
bundle exec jekyll serve

# ブラウザで開く
http://localhost:4000/#faq

# テストページで確認
http://localhost:4000/test-faq.html

2. ブラウザコンソールで確認

// F12で開発者ツールを開き、コンソールタブで確認

// FAQアイテムの数を確認
document.querySelectorAll('.faq-item').length

// アクティブなFAQアイテムを確認
document.querySelectorAll('.faq-item.active').length

// 手動でFAQを開く
document.querySelector('.faq-item').classList.add('active')

3. 期待される動作

1. FAQの質問をクリックすると回答が表示される
2. 別の質問をクリックすると、前の回答が閉じて新しい回答が開く
3. 同じ質問を再度クリックすると閉じる
4. アイコンが180度回転する
5. スムーズなアニメーション

🐛 問題が続く場合のチェックリスト

JavaScriptの確認

• script.jsが正しく読み込まれているか
• Feather Iconsが読み込まれているか
• DOMContentLoadedイベントが発火しているか
• エラーメッセージがコンソールに表示されていないか

CSSの確認

• styles.cssが正しく読み込まれているか
• .faq-itemクラスが適用されているか
• max-heightのトランジションが効いているか

HTMLの確認

• FAQのHTML構造が正しいか（.faq-item > .faq-question + .faq-answer）
• Feather Iconsのdata-feather属性が正しいか

📝 コンソールログの意味

🔧 緊急の修正方法

もし全く動作しない場合は、以下の簡単なコードをコンソールで実行：

// 手動でFAQアコーディオンを有効化
document.querySelectorAll('.faq-item').forEach(item => {
    item.querySelector('.faq-question').onclick = function() {
        item.classList.toggle('active');
    }
});

📞 サポート

問題が解決しない場合は、以下の情報を添えてお問い合わせください：

1. ブラウザ名とバージョン
2. コンソールのエラーメッセージ
3. ネットワークタブでの読み込みエラー