JavaScriptでToggleボタンの開閉処理を実装しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

<目次>

実装するもの

FAQアプリのToggleボタンの開閉処理を実装します。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

JavaScriptでアプリ開発 ~環境構築~

必要なファイルは、以下の通りです。

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

CSS版

CSSでToggle開閉画面のスタイリングをしよう!

開発

ページの作成

最初にページを作成しましょう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>FAQ</title>
  </head>
  <body>
    <h1>Frequently Asked Questions</h1>
    <div class="faq-container">
      <div class="faq active">
        <h3 class="faq-title">
          Why shouldn't we trust atoms?
        </h3>

        <p class="faq-text">
          They make up everything
        </p>

        <button class="faq-toggle">
          <i class="fas fa-chevron-down"></i>
          <i class="fas fa-times"></i>
        </button>
      </div>

      <div class="faq">
        <h3 class="faq-title">
          What do you call someone with no body and no nose?
        </h3>
        <p class="faq-text">
          Nobody knows.
        </p>
        <button class="faq-toggle">
          <i class="fas fa-chevron-down"></i>
          <i class="fas fa-times"></i>
        </button>
      </div>
      
      <div class="faq">
        <h3 class="faq-title">
          What's the object-oriented way to become wealthy?
        </h3>
        <p class="faq-text">
          Inheritance.
        </p>
        <button class="faq-toggle">
          <i class="fas fa-chevron-down"></i>
          <i class="fas fa-times"></i>
        </button>
      </div>
      
      <div class="faq">
        <h3 class="faq-title">
          How many tickles does it take to tickle an octopus?
        </h3>
        <p class="faq-text">
          Ten-tickles!
        </p>
        <button class="faq-toggle">
          <i class="fas fa-chevron-down"></i>
          <i class="fas fa-times"></i>
        </button>
      </div>
      
      <div class="faq">
        <h3 class="faq-title">
          What is: 1 + 1?
        </h3>
        <p class="faq-text">
          Depends on who are you asking.
        </p>
        <button class="faq-toggle">
          <i class="fas fa-chevron-down"></i>
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Frequently Asked Questions</h1>

Why shouldn't we trust atoms?

</h3>

They make up everything

</p>

</button>

</div>

What do you call someone with no body and no nose?

</h3>

Nobody knows.

</p>

</button>

</div>

What's the object-oriented way to become wealthy?

</h3>

Inheritance.

</p>

</button>

</div>

How many tickles does it take to tickle an octopus?

</h3>

Ten-tickles!

</p>

</button>

</div>

What is: 1 + 1?

</h3>

Depends on who are you asking.

</p>

</button>

</div>

</body>

</html>

このHTMLをブラウザ上で表示すると以下のようになります。

スタイルの追加

次にスタイルを記述しましょう。

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Muli', sans-serif;
  background-color: #f0f0f0;
}

h1 {
  margin: 50px 0 30px;
  text-align: center;
}

.faq-container {
  max-width: 600px;
  margin: 0 auto;
}

.faq {
  background-color: transparent;
  border: 1px solid #9fa4a8;
  border-radius: 10px;
  margin: 20px 0;
  padding: 30px;
  position: relative;
  overflow: hidden;
  transition: 0.3s ease;
}

.faq.active {
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
}

.faq.active::before,
.faq.active::after {
  content: '\f075';
  font-family: 'Font Awesome 5 Free';
  color: #2ecc71;
  font-size: 7rem;
  position: absolute;
  opacity: 0.2;
  top: 20px;
  left: 20px;
  z-index: 0;
}

.faq.active::before {
  color: #3498db;
  top: -10px;
  left: -30px;
  transform: rotateY(180deg);
}

.faq-title {
  margin: 0 35px 0 0;
}

.faq-text {
  display: none;
  margin: 30px 0 0;
}

.faq.active .faq-text {
  display: block;
}

.faq-toggle {
  background-color: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 0;
  position: absolute;
  top: 30px;
  right: 30px;
  height: 30px;
  width: 30px;
}

.faq-toggle:focus {
  outline: 0;
}

.faq-toggle .fa-times {
  display: none;
}

.faq.active .faq-toggle .fa-times {
  color: #fff;
  display: block;
}

.faq.active .faq-toggle .fa-chevron-down {
  display: none;
}

.faq.active .faq-toggle {
  background-color: #9fa4a8;
}

100

101

102

103

104

105

106

107

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {

box-sizing: border-box;

}

body {

font-family: 'Muli', sans-serif;

background-color: #f0f0f0;

}

h1 {

margin: 50px 0 30px;

text-align: center;

}

.faq-container {

max-width: 600px;

margin: 0 auto;

}

.faq {

background-color: transparent;

border: 1px solid #9fa4a8;

border-radius: 10px;

margin: 20px 0;

padding: 30px;

position: relative;

overflow: hidden;

transition: 0.3s ease;

}

.faq.active {

background-color: #fff;

box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);

}

.faq.active::before,

.faq.active::after {

content: '\f075';

font-family: 'Font Awesome 5 Free';

color: #2ecc71;

font-size: 7rem;

position: absolute;

opacity: 0.2;

top: 20px;

left: 20px;

z-index: 0;

}

.faq.active::before {

color: #3498db;

top: -10px;

left: -30px;

transform: rotateY(180deg);

}

.faq-title {

margin: 0 35px 0 0;

}

.faq-text {

display: none;

margin: 30px 0 0;

}

.faq.active .faq-text {

display: block;

}

.faq-toggle {

background-color: transparent;

border: 0;

border-radius: 50%;

cursor: pointer;

display: flex;

align-items: center;

justify-content: center;

font-size: 16px;

padding: 0;

position: absolute;

top: 30px;

right: 30px;

height: 30px;

width: 30px;

}

.faq-toggle:focus {

outline: 0;

}

.faq-toggle .fa-times {

display: none;

}

.faq.active .faq-toggle .fa-times {

color: #fff;

display: block;

}

.faq.active .faq-toggle .fa-chevron-down {

display: none;

}

.faq.active .faq-toggle {

background-color: #9fa4a8;

}

ここまで実装すると以下のようになります。

Toggleボタンは、「Font Awesome」を使っています。

また、背景のコメントバルーンは、ユニコード「\f075」で表現しています。これもFont Awesomeから提供されています。

JavaScriptの実装

Toggleボタンによるカードの開閉は、「active」クラスを「feq」クラスが付与されているHTML要素に追加することで表現します。

<div class="faq active"> <<< ここにactiveをつける

1	<div class="faq active"> <<< ここにactiveをつける

要素を取得する

JavaScriptで制御すべき要素が1つあります。最初にこの要素を取得しましょう。

// 要素を取得する
const toggles = document.querySelectorAll('.faq-toggle')

1 2	// 要素を取得する const toggles = document.querySelectorAll('.faq-toggle')

ページ上の全てのtoggle要素を取得しました。この要素は、配列形式で格納されます。

クリックイベントの登録

続いて、クリックイベントを登録しましょう。対象は、全てのtoggle要素です。

// 取得したtoggle要素をループで回す
toggles.forEach(toggle => {
  // クリックイベントを登録
  toggle.addEventListener('click', () => {

  })
})

// 取得したtoggle要素をループで回す

toggles.forEach(toggle => {

// クリックイベントを登録

toggle.addEventListener('click', () => {

})

forEachは、配列内の要素をループして処理してくれる便利なメソッドで、パラメータのtoggleは、toggles(配列)に格納されている要素です。「toggle」という名前にしましたが、これは任意の名前です。しかし、toggles -> toggle(配列から取り出した要素)であることが明確になるので、こういった書き方の方が良いと思います。

他の言語でも似たような実装をしますね。

// python
for toggle in toggle_list:
    print(task)

// golang
for _, toggle := range toggles {
    fmt.Println(toggle)
}

// python

for toggle in toggle_list:

print(task)

// golang

for _, toggle := range toggles {

fmt.Println(toggle)

}

parentNodeで親要素にアクセス

HTML上では、取得したtoggle要素は次の場所にあります。

  <body>
    <h1>Frequently Asked Questions</h1>
    <div class="faq-container">
      <div class="faq">
        <h3 class="faq-title">...</h3>
        <p class="faq-text">...</p>

        <button class="faq-toggle"> <<<< ここの要素を取得している
          <i class="fas fa-chevron-down"></i>
          <i class="fas fa-times"></i>
        </button>
      </div>
....
    </div>
    <script src="script.js"></script>
  </body>

<body>

<h1>Frequently Asked Questions</h1>

<button class="faq-toggle"> <<<< ここの要素を取得している

</button>

</div>

....

</div>

</body>

カードを開閉するためには、toggle要素の親である<div claass="faq"> にアクセスする必要があります。

それを可能にするものが、「parentNode」プロパティです。このプロパティを経由して、activeクラスを付与します。

toggles.forEach(toggle => {
  toggle.addEventListener('click', () => {
    // 親要素へactiveクラスを付与する
    toggle.parentNode.classList.toggle('active')
  })
})

toggles.forEach(toggle => {

toggle.addEventListener('click', () => {

// 親要素へactiveクラスを付与する

toggle.parentNode.classList.toggle('active')

})

classListのtoggleは、activeクラスが付与されている場合は除去し、そうでない場合は付与します。かなり便利なメソッドです。

これで完成です。

おわりに

Toggleボタン系の処理も現場ではよく実装しますね。Bootstrapを使うのもありだと思いますが、結構簡単に実装できるので(CSSは難しいが)、パパッと作れると思います。

それでは、また！

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

// 要素を取得する
const toggles = document.querySelectorAll('.faq-toggle')

// 取得したtoggle要素をループで回す
toggles.forEach(toggle => {
  // クリックイベントを登録
  toggle.addEventListener('click', () => {
    // 親要素へactiveクラスを付与する
    toggle.parentNode.classList.toggle('active')
  })
})

月	火	水	木	金	土	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

JavaScriptでToggleボタンの開閉処理を実装しよう!

実装するもの

環境構築

CSS版

開発

ページの作成

スタイルの追加

JavaScriptの実装

要素を取得する

クリックイベントの登録

parentNodeで親要素にアクセス

おわりに

JavaScriptまとめ

JavaScript ソースコード

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

環境構築

CSS版

開発

ページの作成

スタイルの追加

JavaScriptの実装

要素を取得する

クリックイベントの登録

parentNodeで親要素にアクセス

おわりに

JavaScriptまとめ

JavaScript ソースコード

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

[Go言語]Template Methodパターンを学ぼう!

[Golang/React]~MovieApp1: アプリ連携~

Django REST Frameworkでアプリケーション開発 ～ Med…

[golang]fiber API作成~まとめ~

[golang]Go&PostgresのDocker環境構築とHttpSer…

CSSでポケモンカードをスタイリングしよう!

Go言語 ~基礎編~ 自動テスト

[golang]fiber API4~Ambassador: Redisの導…

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル

Django REST Frameworkでアプリケーション開発～ Med…