応答性のあるアコーディオンインターフェイスの構築

はじめに

このプロジェクトでは、HTML、CSS、JavaScriptを使って簡単な折りたたみ式のアコーディオンを作成する方法を学びます。折りたたみ式のアコーディオンは、ユーザーがコンテンツのセクションを展開および折りたためる一般的なUI要素であり、コンパクトかつ整理された形で情報を表示するのに便利な機能です。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下を学びます。

• 折りたたみ式のアコーディオン用のHTML構造を設定する方法
• CSSを使ってアコーディオンをスタイリッシュにする方法
• JavaScriptを使ってアコーディオンにインタラクティビティを追加する方法

🏆 成果

このプロジェクトを完了すると、以下ができるようになります。

• 応答性があり、視覚的に魅力的なアコーディオンインターフェイスを作成する
• JavaScriptを使ってWeb要素にインタラクティビティと動的な動作を追加する
• HTML、CSS、JavaScriptを統合して機能的でユーザーフレンドリーなWebコンポーネントを構築する

Skills Graph

プロジェクト構造をセットアップする

このステップでは、エディタで提供されたファイルを開いてプロジェクトをセットアップします。

1. エディタを開き、以下のファイルが表示されるはずです。index.html、style.css、index.js、およびjquery-3.6.0.min.js。
2. WebIDEの右下隅にあるGo Liveボタンをクリックして、プロジェクトを実行します。
3. VMの上部にある「Web 8080」を開き、手動で更新してページを表示します。折りたたまれたページの画像をクリックしても、それが展開されません。以下のように確認できます。

jQueryを使ってインタラクティビティを追加する

このステップでは、jQueryを使ってアコーディオンにインタラクティビティを追加します。

1. エディタでindex.jsファイルを開きます。
2. 以下のコードを追加します。

$(".option").click(function () {
  $(".option").removeClass("active");
  $(this).addClass("active");
});

このコードは、各.option要素にクリックイベントリスナーを追加します。.optionがクリックされると、コードはすべての.option要素からactiveクラスを削除し、クリックされた.option要素にactiveクラスを追加します。これにより、必要に応じてアコーディオンを折りたたみまたは展開します。

3. index.jsファイルを保存します。
4. ブラウザを更新して完成した結果を表示します。
5. 異なるアコーディオンオプションをクリックして、それらが展開および折りたたまれるのを確認します。

この効果は次のようになります。

おめでとうございます！ あなたは折りたたみ式のアコーディオンプロジェクトを完了しました。

まとめ

おめでとうございます！ このプロジェクトを完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を行って練習することができます。