フリーランスが会社員収入を継続して得られないパターン7つ

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

バンコクのエンジニア講座であるisara3期の課題でみんながつまづいた、アコーディオンに:beforeや:afterなど擬似要素で矢印をつけている場合の開閉方法を紹介します。

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

1.作るアコーディオン

クリック前

jQueryのクリックイベント

クリック後

jQueryのクリックイベント

クリックイベントの機能は2つ

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

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

 

2.jQueryのクリックイベントでアコーディオンを作成する方法

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

HTML

CSS

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

jQuery

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

 

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

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

jQuery

フリーランスが9割の案件を営業なしで受注している方法