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

擬似要素:beforeや:afterなどにjQueryのクリックイベントを起こす方法を解説します。

 

擬似要素の:afterをjQueryでクリックして作りたいもの

アコーディオンに:beforeや:afterなど擬似要素で矢印をつけている場合の開閉方法を紹介します。

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

開閉方法としてはjQueryのクリックイベントを使いますが、:beforeや:afterなど擬似要素にクリックイベントを起こせます。

擬似要素の:afterをjQueryでクリックする前の状態

jQueryのクリックイベント

 

擬似要素の:afterをjQueryでクリックした後の状態

jQueryのクリックイベント

 

擬似要素の:afterをjQueryでクリックするアコーディオンの機能

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

 

 

擬似要素の:afterをjQueryでクリックできるようにする方法

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

HTML

 

CSS

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

 

jQuery

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

 

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

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

jQuery