toggle メニュー

1.toggle

よく使うクリックメニューをご紹介します。

こちらのクリックメニューの仕様は、こちらです。

  1. 複数開く
  2. クリックした要素にクラスが追加される

クリックすると、矢印が上になるようになっています。
本サイトは、fontawesomeを読み込んでいます。

2.デモ

まずは、デモをご覧ください。グリーンの部分をクリックしてみてくださいね。

アコーディオン

テスト

アコーディオン

テスト

3.JS読み込み

サイトに、jsが読み込まれてない方は、こちらを読み込んでください。

4.fontawesome読み込み

矢印のアイコンを使うために、fontawesomeを読み込んでいます。
使用される方は、head内に記述してください。

5.ソース

ソースはこちらです。ご自由にお使いください。

html

css

JS

関連記事一覧

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

広告

Calendar

2021年8月
« 1月    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
PAGE TOP