アコーディオンメニュー
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を入れようとしたけど入らんかった。
恐らくブロックレベル属性だからっぽい。
関連記事
formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)
フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...
日付入力のテキストフォームにカレンダープラグインを導入
やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...
Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法
画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...
jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方
divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあ ...
フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法
formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力 ...