学ぶプログラミング言語を間違えると悲惨な話

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

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

 

擬似要素の:before、:afterをjQueryでクリックして作りたいアコーディオン

今回は、アコーディオンのクリックをする開閉で矢印を変更する際に、擬似クリックを使う方法の紹介です。

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

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

擬似要素の:before、:afterをjQueryでクリックする前のアコーディオンの状態

jQueryのクリックイベント

擬似要素の:before、:afterをjQueryでクリックした後のアコーディオンの状態

jQueryのクリックイベント

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

1.アコーデイオンで擬似要素をクリックすると中身が表示される

2.クリックすると矢印↓が↑になる

 

擬似要素の:before、:afterをjQueryでクリックしてアコーディオンを作成する方法

擬似要素の:before、:afterをjQueryでクリックしてアコーディオンの中身を表示する方法

HTML

CSS

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

jQuery

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

 

擬似要素の:before、:afterをjQueryでクリックしてアコーディオンの矢印↓を↑にする方法

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

jQuery