勉強したことのメモ

webプログラマが勉強したことのメモ。

アコーディオンメニュー

      2014/07/03

簡単にアコーディオンメニューを導入したい時に
便利に使えたプラグイン

■サンプル
http://sample.taitan916.info/accordion/

■参考サイト
http://www.css-lecture.com/log/javascript/019.html

■ソース
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="./script.js"></script>
<title>accordion</title>
</head>
<body>
<h1>accordion</h1>
<div id="accordion">
<dl class="accordion" id="slider">
<dt>タイトル1</dt>
<dd>
<span>
内容内容内容内容内容内容内容内容内容内容内容内容
</span>
</dd>
<dt>タイトル2</dt>
<dd>
<span>
内容内容内容内容内容内容内容内容内容内容内容内容
</span>
</dd>
<dt>タイトル3</dt>
<dd>
<span>
内容内容内容内容内容内容内容内容内容内容内容内容
</span>
</dd>
</dl>
</div>
<script>
var slider1=new accordion.slider("slider1");
slider1.init("slider");
</script>
</body>
</html>

■使い方
JSファイルとCSSファイルを呼び出し。
bodyが終わる直前で↓↓を記述。
<script>
var slider1=new accordion.slider("slider1");
slider1.init("slider");
</script>

■その他
アコーディオン内にtableを入れようとしたけど入らんかった。
恐らくブロックレベル属性だからっぽい。

 - jQuery

  関連記事

jQueryのappendとprepend

よく忘れるのでメモ。 ■append(後ろに足す) http://semooh. ...

jQueryで電話番号チェック

やりたかったことはjavascriptかjQueryで 電話番号のバリデート。 ...

スクロールしてもついてくる追尾型の広告を作る方法

スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...

画像をサムネイル⇔クリックで拡大(lightbox)

画像をサムネイル表示してクリックしたら大きく表示する というのがlightbox ...

複数のajax処理の結果をまとめて表示

同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...

画像アップロード前の時点で画像が選択されているか確認

やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...

FullCalendarでtitle以外も表示させたい

FullCalendarでカレンダー内のイベントをクリックした際にtitle以外 ...

Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...

getElementsByTagName

うろ覚えだけど業務中に、 document.getElementById('aa ...

tableのフィルター機能

jQueryのプラグインで簡単にフィルター機能が つけられたのでメモ。 ■必要な ...