✅ 【jQuery中級】開いているアコーディオンだけ三角が上向き！最初から1つ開くスマートな実装方法

こんにちは、コーダーのためのWeb制作ブログの中の人です！👋
今回はよくある実案件で実装されてる、「最初から1つ開く＆アイコンが連動して向きを変える」アコーディオンメニューの実装方法を紹介します。コードはそのままコピーして使えますよ！

✅ この記事で学べること

• アコーディオンの開閉とアイコンの連動（下向き▼／上向き▲）
• 最初のアコーディオンだけ開いた状態で表示
• 他をクリックすると前に開いていた項目は自動で閉じる
• アクセシビリティにも対応

📌 完成イメージ

• 最初から1つ目のFAQが開いている状態で表示
• 開いている項目は「閉じる」の三角アイコン（上向き▲）に自動切替
• 閉じている項目は「開く」の三角アイコン（下向き▼）
• 別の項目をクリックすると、前に開いていた項目は自動的に閉じる
• キーボード操作やスクリーンリーダーにも対応したアクセシブルな設計

See the Pen Untitled by ひさ (@npupiwfh-the-sans) on CodePen.

アニメーション速度の調整
クライアントから「もう少しゆっくり開閉して」と言われたことも。slideDown/slideUp の数値で調整します。なかなか言われることは無いのですが(笑)：

javascript// よりゆっくり開く（数値は大きくする）
$clickedHeader.next('.accordion-content').slideDown(500);

// 素早く閉じる（数値は小さくする）
$clickedHeader.next('.accordion-content').slideUp(200);

✅ ポイントまとめ

💡 補足：より高度なUIにするなら…

• アイコンをSVGにすればもっと柔軟なデザインが可能
• すべて開閉のトグルボタンも追加できる
• フォーカス管理やキーボード操作の対応でさらにアクセシブルに！

🙆‍♀️ まとめ

このアコーディオンの実装は、現場でそのまま使えるレベルです！

• 初期表示から正確：最初から開いている項目の三角も正しい向きに
• 動作がスムーズ：スライドアニメーションで視覚的にわかりやすい
• 1項目だけ開く：情報が整理されユーザーが迷わない
• 三角アイコンも開閉と連動して向きが変わる
• アクセシビリティ対応：aria属性でスクリーンリーダーにも配慮

UIを「使いやすく、分かりやすく」作る力が一段上がります✨

✉️ あなたのリクエスト教えてください！

「この記事わかりやすかった！」
「他にもこんな記事書いてほしい！🙋‍♂️」
「他にもこんなUIの実装方法が知りたい」
リクエストがあればぜひコメントやX(TumaLOVE0127)のDMで教えてください！😊📩

できるだけリクエストにお応えして、今後の記事作成に活かしていきます！

▶️現場での経験をもとに、実用的な内容を発信していきます。フォローしていただけると励みになります！

#jQuery #アコーディオン #Web制作 #コーダー