ウィンナスのプログラミング忘備録

アプリケーション制作をしている最中に発見したテクニックを忘備録としてまとめていきます。

【WEB】Jqueryでアコーディオンを作ってみた

今回は、Jqueryを使ってアコーディオンを作りました。

アコーディオンとはあれですね。

メニュー表示する際に「にょ~」って出てくるあれ!

 

サンプルは【凡才エンジニアの成果物】に貼っておきますね!

 

実装は、HTML , CSS , JavaScript を使います。

書かなくてもいいレベルで普通

 

全体の流れとしては、

非表示 ∧ 重ねているメニューを下にスライドさせながら表示させる!

だけです。

 

HTML

[ dl ] , [ dt ] , [ dd ] で実装しました。

これじゃなくて [ ul ] とかでもいいと思いますが、デフォで表示させる部分(今回は「メニュー」)の識別が面倒なのでこちらをおススメします。

 

CSS

最低限必要なものは [ position : absolute ] と [ display : none ] です。

つまり隠す処理ですね。

 

JavaScript

 [ dt ] タグがクリックされたら、[ dd ] タグをスライドさせながら表示して∧ [ position ] を直していきます。

サンプルはこちらから!