アコーディオンメニュー
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>タイトル１</dt>
<dd>
<span>
内容内容内容内容内容内容内容内容内容内容内容内容
</span>
</dd>
<dt>タイトル２</dt>
<dd>
<span>
内容内容内容内容内容内容内容内容内容内容内容内容
</span>
</dd>
<dt>タイトル３</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を入れようとしたけど入らんかった。
恐らくブロックレベル属性だからっぽい。
関連記事
-
Ajaxで負荷軽減
業務中、専用のページでfile_get_contents的なものは あまり使わな ...
-
jQueryでjsonデータを処理(parseJSON)
他社が作成したシステムのちょっと改修案件があった。設置したもののどうも動かないと ...
-
pjaxについてのメモ
ずっと気になっていたpjaxについてのメモ。 ■参考サイト http://chi ...
-
画像をつなぎ合わせて360度ビューの様に見せるjQueryプラグイン
3Dデータではなく、コマ送りになっている2D画像を用いて360度ビューの様に見せ ...
-
jquery.cookie.jsで保存期間を時間指定する方法
jquery.cookie.jsで保存期間を1時間等、時間指定したい。公式サイト ...