アコーディオンを3つの簡単な方法で構築する方法

アコーディオンメニューは、ヘッダーを選択したり、開いたり、ヘッダーに関連する追加の内容を明らかにする垂直方向のリストを含むものです.
こんにちは人々と私のJavaScriptプロジェクトシリーズへようこそ.このシリーズでは、簡単な簡単なミニプロジェクトから、いくつかのJavaScriptプロジェクトを構築します.
私たちが始める前に、私はあなたに、それぞれのプロジェクトへのすべてのコードが特定の私のGithub口座で見つけることができるということを知っていて欲しいですrepo 私は別のプロジェクトの詳細ノートを公開すると、常に更新されます.私も配備しましたlive link どこで表示することができますし、終了したプロジェクトとの対話.

必要条件

私は、あなたが既にHTML、CSS、およびJavaScriptを使用することに慣れていて、JavaScript DOM操作がどのように働くかについての基本的な理解を持っていると仮定するつもりです.
さあ、最初のプロジェクトから始めましょうアコーディオンを構築する3つの簡単な方法.

まず、アコーディオンメニューは何ですか？

アコーディオンメニューは、ヘッダーを選択したり、開いたり、ヘッダーに関連する追加の内容を明らかにする垂直方向のリストを含むものです.しばしば、彼らは簡単に回答を気を取られることなく、質問のリストをスキャンすることができます質問のページを見つけることができるFAQのページで、それらをクリックしてコントロールを与え、それらに興味のある質問に答えを表示します.
さあ、アコーディオンを作りましょう.

アコーディオンの作り方

このノートのタイトルとして、私はあなたにアコーディオンを構築する3つのシンプルで異なる方法を示すつもりです.

アコーディオンの例1

この最初の例は最も簡単で、ビルドするのが最も簡単で、JavaScriptコードを書くことには関係ありません.あなただけの要約と詳細と呼ばれる2つのHTMLタグを使用する必要があります.

<details class="accordion1-card">
  <summary class="accordion1-card__header">Header</summary>
  <p class="accordion1-card__body">
        Lorem ipsum, dolor sit amet consectetur adipiscing elit. Et neque, velit quasi quos quia nulla 
        omnis! Similique dolorum, veniam facilis aliquam est fuga aperiam voluptatibus, sapiente
        atque vitae quia accusamus.
  </p>
</details>

要約タグには、アコーディオンのすべてについての概要を与えるヘッダーが含まれます.詳細タグには、上のコードスニペットから見ることができるように、Pタグに配置されるアコーディオンの要約タグと本体または追加コンテンツが含まれています.それで、あなたがヘッダー(すなわち要約)をクリックするとき、詳細内容はさらなる内容を明らかにするためにドロップダウンします.

アコーディオン2

この2番目の例では、JavaScriptのいくつかの行が含まれています.ここでは、ヘッダーのクリックイベントを聞いているでしょう.そのため、ユーザーがヘッダーをクリックすると、関数が解凍されて本体またはコンテンツに表示されます.
HTMLを書きましょう.

<div class="accordion2-card">
    <h3 class="accordion2-card__header">
      Header
      <span class="icons material-icons-outlined">
        add_circle_outline
      </span>
    </h3>
    <p class="accordion2-card__body">
        Lorem ipsum, dolor sit amet consectetur adipiscing elit. Et
        neque, velit quasi quos quia nulla omnis! Similique dolorum,
        veniam facilis aliquam est fuga aperiam voluptatibus, sapiente
        atque vitae quia accusamus.
    </p>
</div>

ここでは、ヘッダーのためのH 3タグとボディーのためのPタグを含むDIV要素があります.また、アコーディオンが開いているとき、その色が赤に変化して、45 degの角度で回転するヘッダーの中にアイコンを持っています、そして、アコーディオンが閉じられるとき、スタイルは戻ります.
CSSを少し美しくしましょう.

/* accordion card */
.accordion2-card {
  width: 280px;
  border: double goldenrod;
  background-color: white;
}

/* accordion header */
.accordion2-card__header {
  color: #202020;
  position: relative;
  padding: 10px;
  margin-bottom: 0;
}

/* icons */
.icons {
  position: absolute;
  right: 10px;
  color: goldenrod;
  transform: rotate(0deg);
  transition: transform 300ms, color 300ms;
}

/* accordion body */
.accordion2-card__body {
  border-top: solid 1px goldenrod;
  padding: 10px;
  color: #3d3b3b;
  display: none;
}

/* javascript css classes to be added and removed */
.toggleIcon {
  transform: rotate(45deg);
  color: hsl(0, 70%, 50%);
}

.active {
  display: block;
}

JavaScriptの時間.

//* Js code for accordion 2 example
// variables
const accordion2BtnToggle = document.querySelectorAll(
  ".accordion2-card__header"
);

まず、すべてのヘッダーがqueryselectorallを使用して選択され、それらをアコーディオン2 btntoggleという名前の配列として保存します.

// adding event listener to the accordion2 toggle button
for (i of accordion2BtnToggle) {
  i.addEventListener("click", accordion2ToggleFunction);
}

次に、イベントリスナーがすべてのヘッダーに追加され、ユーザーがヘッダーのいずれかをクリックすると、AutoDean 2 TougleFunctionという関数が実行されます.では、その関数を作成しましょう.

// function to open an accordion
function accordion2ToggleFunction() {
  this.nextElementSibling.classList.toggle("active");
  this.children[0].classList.toggle("toggleIcon");
}

この関数は、ユーザーが特定のヘッダーをクリックすると、その次の要素の兄弟である本体(両方の要素が同じdiv要素に格納されているため)がアクティブクラスを持つことになります.
一方、子供[ 0 ]は、アイコン(それはH 3タグの最初の子であるヘッダー)を選びます、そして、クリックの上でアイコンの程度角度と色を変えます.
では3番目の例に移りましょう.

アコーディオン3例

この3番目の例は、私たちの2番目の例と同じですが、唯一の違いは、ユーザーが特定のアコーディオンのヘッダーをクリックすると、別のヘッダーの本体が現在開いている場合、自動的に閉じるときにクリックしたヘッダーの本文を表示することです.HTMLとCSSのコードは同じですが、JavaScriptコードでは動作する関数が異なります.

// function to open an accordion while closing the others
function accordion3ToggleFunction() {
  for (i of accordion3BtnToggle) {
    i.nextElementSibling.style.display = "none";
    i.children[0].classList.remove("toggleIcon");
  }
  if (this.nextElementSibling.style.display == "none") {
    this.nextElementSibling.style.display = "block";
    this.children[0].classList.add("toggleIcon");
  }
}

上のコードから、ユーザーが特定のヘッダーをクリックしたとき、ループの最初のすべてのループを最初に表示します.
if文は、クリックされた特定のヘッダーの本体がNoneの表示スタイルを持つかどうかをチェックします.そうするならば、それは表示ブロックのスタイルをそれに加えて、我々のTopgleIconクラスをアイコンに加えます.
ユーザーが次に別のヘッダーをクリックすると、ループのfor…が再び実行され、すべての本体にNoneの表示ができ、前の本体とアイコンに追加されたものを含むアイコンからトグルアイコンを削除します.次に、if文が再び実行され、アクティブとトグルのアイコンを、クリックした新しいヘッダーの本体とアイコンに追加します.
あなたがアコーディオンを作る3つの簡単な方法を見た今、私はあなたがあなたの次のプロジェクトでこれを使うことを望みます.JavaScriptプロジェクトは次のようにビルドしますか?
次の時間までは、bayee!

接続してください

畝LinkedIn | .
あなたが私のメモが好きで、私を支持したいならば、あなたは私にコーヒーを買うことができますByMeACoffee or GetFidia . 私はコーヒーの味が好きです.🥰

資源

View the code on GitHub here

View the project here

When Should You Use Accordions on Your Website

JavaScript HTML DOM Navigation