勉強したことのメモ

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

  関連記事

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

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

スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア

タブレット&スマホでの閲覧が想定されているページで、スワイプ・サムネイル・フルス ...

javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムに プレビューする機能を作った時に ...

ダウンロード無しで外部ファイル呼び出し

■jQuery http://scriptsrc.net/ ■bootstrap ...

jQueryのプラグインでカラーコードを視覚的に選択

カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、 ...

jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...

テキストエリアを自動でリサイズ

改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...

chardin.jsを利用して注釈を入れる

簡易マニュアルとかでむっちゃ使えそう。 ■chardin.js http://h ...

imgタグで作成したグラフをjQueryでリアルタイムに動かす

このグラフをリアルタイムプレビューさせる。 ■サンプル http://sampl ...

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

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