jQueryでtoggleメニュー作成
「jquery」でクリックした時に表示する方法をのご紹介!!
「jquery.js」をダウンロード致します。
ダウンロード先
jRumble をダウンロード
ダウンロード先
HTMLを記載
下記のソースを追加してください。
|
1 2 3 4 5 6 |
<dl id="sampletoggle"> <dt>ここをクリック</dt> <dd>クリックして表示される内容</dd> <dt>ここをクリック</dt> <dd>クリックして表示される内容</dd> </dl> |
Cssを記載
下記のソースを追加してください。
|
1 2 3 |
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
