勉強したことのメモ

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_logo
jQueryで画像を遅延ロードする(jquery.lazyload.js)

画像を遅延ロードさせたい時にはlazyloadが便利。 ■ダウンロード http ...

images
imgタグとPHPでグラフ作成

プラグインやライブラリを使わずにグラフを作る 機会があったのでメモ。 ■サンプル ...

jquery_logo
jQueryのtoggleに引数

社内のソースで、 $(".hoge").toggle(flg == 1? fal ...

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

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

jquery_logo
jQueryで電話番号チェック

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

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

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

jquery_logo
lightboxをファイルアップロードなしで使う(CDN)方法

本番実装時ならともかく、テスト用とかでlightboxみたいによく使うプラグイン ...

javascript_logo_unofficial-300x300
Flashを用いずJavaScriptでコピー&カット機能を実装する

以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...

jquery_logo
jQueryでUNIXタイムスタンプの取得

jQueryでUNIXタイムスタンプを取得したい場合、 $.now()だけで取得 ...

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

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