忍者ブログ

メモ的な日記

プログラミングについての個人的メモ日記。PHPとかjQueryとかがメイン。

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

アコーディオン式スライダー

ウェブサイトによくあるアコーディオン型のスライダーを使ってみる。
ソース配布先はこちら。Click here to download the source code.からダウンロード出来ます。
サイト内のダウンロードリンクはこちら

基本的にはダウンロードしたaccordion.zipを解凍した中にあるindex.htmlと同じように組み込んでいけば同じように使えます。

<head>にjsファイルとcssファイルの呼び出しを記述


<body>部分にdiv,dl,dt,ddでリスト作成



最後にJavascriptの記述を。
記述の仕方でページを開いた時にリストを閉じておくか、どれかを開いた状態で表示するかを変更できます。

すべて閉じる場合


どれかを開いておく場合


slider1.initの第2引数にどこを開いておくかを記述します。
0だと1番目、1だと2番目を開く、といった感じ。
サンプルはこちら
cssを編集すればいろいろアレンジ出来そう?

おわり。
PR

コメント

お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード Vodafone絵文字 i-mode絵文字 Ezweb絵文字

カレンダー

07 2017/08 09
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

カテゴリー

フリーエリア

最新CM

プロフィール

HN:
nate
性別:
非公開

バーコード

ブログ内検索

P R