フリーランスが営業なしで受注する方法5つ

jQueryのクリックイベントを起こし、開閉で矢印を変更【アコーディオン】

jQueryのクリックイベントを起こす方法を解説します。

jQueryでクリックして作りたいもの

アコーディオンに矢印をつけている場合の開閉方法を紹介します。

「矢印」を作り、それをjQueryで「下向き」「上むき」と変えて開閉を変更します。

開閉方法としてはjQueryのクリックイベントを使います。

クリックする前の状態

jQueryのクリックイベント

 

クリックした後の状態

jQueryのクリックイベント

 

アコーディオンの機能の内容

  1. アコーデイオンで擬似要素をクリックして中身を表示
  2. クリックして矢印↓を↑にする

 

jQueryでクリックできるようにする方法

1.アコーディオンで擬似要素をクリックして中身を表示

HTML

 

CSS

.panel-head:after、.panel-head.ac:afterが下矢印、上矢印の表記です。

 

jQuery

$(this).next()でクリックすると次の要素が現れるというjQueryの表記方法です。

 

クリックして矢印↓を↑にする

上記のコードにjQueryの以下の記述を追加しましょう。

jQuery