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

はじめに

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

👀 プレビュー

🎯 タスク

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

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

🏆 成果

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

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

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

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

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 でさらに多くの実験を行って練習することができます。