疑似要素とCSSでスライドスイッチを表示し、jQueryで詳細の表示・非表示を切り替える。

疑似要素とCSSでスライドスイッチ（トグルスイッチ）を表示し、スイッチに触れたら jQuery で、詳細内容(ブロック要素）の表示・非表示を切り替える（同時にスイッチのオン・オフ状態も変える）。

デモページを表示

CSS

補足

• slide-switch クラス内の span 要素の before 疑似要素で、スイッチの背景を作り、after 疑似要素でスイッチのノブを作っている。
• slide-switch クラス に ON クラスが追加されている時は、スイッチの背景色を変え、ノブ位置を右へ移動し、色も変えてオン状態がわかるようにしている。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• slide-switch クラスをクリック（タッチ）すると、ON クラスが追加（または削除され）、オン・オフ状態が切り替わる。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• slide-switch クラス内の span 要素で スライドスイッチと "詳細表示" の文字列を表示している。
• そのため、文字列部分をクリック（タッチ）してもオン・オフが切り替わる。