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

こんにちは。KOUKIです。

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

実装するもの

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

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

環境構築

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

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

開発

ページの作成

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

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

スタイルの追加

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

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

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

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

JavaScriptの実装

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

要素を取得する

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

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

クリックイベントの登録

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

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

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

parentNodeで親要素にアクセス

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

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

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

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

これで完成です。

おわりに

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

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

コメントを残す