jQuerytoggleメニューClass追加で表示を変更

jQueryでtoggleメニュー作成

「jquery」でクリックした時に表示する方法をのご紹介!!

「jquery.js」をダウンロード致します。
ダウンロード先

jRumble をダウンロード
ダウンロード先

HTMLを記載

下記のソースを追加してください。

 
ここをクリック
クリックして表示される内容
ここをクリック
クリックして表示される内容

Cssを記載

下記のソースを追加してください。

dl#sampletoggle dt { background:url("http://teach.web-represent.link/wp-content/uploads/2019/02/sampledown.png") left center no-repeat;padding-left:20px }
dl#sampletoggle  dt.active { background:url("http://teach.web-represent.link/wp-content/uploads/2019/02/sampleup.png") left center no-repeat;padding-left:20px }
dl#sampletoggle  dd { display:none; }

Javascriptを記載

下記のソースを追加してください。
※読み込みのcssはサンプルのリンク先を参照してください。


サンプル

下記のソースをお使いください。
表示サンプルを掲載いたします。

サンプルはこちら:toggleメニューサンプル

参考サイト:wryoku

Author: 小清水 和真

WebディレクションからWebザイン・コーディングを主に行っております。 2021年株式会社を設立。講師もしております。

コメントを残す