jQueryで簡単アコーディオンのサンプルを作ってみた
よく読まれている記事
jQueryで動くアコーディオンを作ってみました。
CSS3のtransitionを利用していますので、IE8以下は▲,▼の表示が表示されません。
IE9以降のブラウザで御覧ください。
サンプルの解説
- 「タイトル」をクリックすると「中身」がぬるっと出てきます。
- 「タイトル」の右側にある▼マークは「中身」が開くと▲に変わります。
- 三角部分はcssで作成しています。画像は使っていません。
- アコーディオンの中身のlistは#にリンクしています。
jQueryについての解説
ページを読み込んだらjQueryしてくださいの指示を出して、|
1 2 3 |
$(function() { |
まずは、.accordionの中のddはcssでdisplay:none;して、
|
1 2 3 |
$(".accordion dd").css("display","none"); |
.accordionの中のdtをクリックしたとき、それにopenのclassが無かったら付与して（あったら削除して）、その次のddを.slideToggle(“fast”)しちゃってください。
|
1 2 3 4 5 6 |
$(".accordion dt").click(function(){ $(this).toggleClass("open").next().slideToggle("fast"); }); }); |
といった感じです。
.slideToggle(“fast”)がぬるっとした動きを指示しています。
速度は、slow、normal、fast、もしくは完了までの時間をミリ秒単位で指定します。
例えば”1200”であれば、1.2秒かけてアニメーションが行われます。
htmlサンプル
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="lite.css" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(function() { $(".accordion dd").css("display","none"); $(".accordion dt").click(function(){ $(this).toggleClass("open").next().slideToggle("fast"); }); }); </script> </head> <body> <ul> <li> <dl class="accordion"> <dt>タイトル</dt> <dd> <ul> <li><a href="#">中身</a></li> <li><a href="#">中身</a></li> </ul> </dd> </dl> </li> <li> <dl class="accordion"> <dt><h2>タイトル</h2></dt> <dd> <ul> <li><a href="#">中身</a></li> <li><a href="#">中身</a></li> </ul> </dd> </dl> </li> <li> <dl class="accordion"> <dt><h2>タイトル</h2></dt> <dd> <ul> <li><a href="#">中身</a></li> <li><a href="#">中身</a></li> </ul> </dd> </dl> </li> </ul> </body> </html> |
CSSサンプル
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
/*accordion*/ dl.accordion dt { background: #333; cursor: pointer; border-bottom: 1px solid #fff; word-wrap:break-word; } dl.accordion dt { display: block; padding: 10px 30px 10px 10px; color: #fff; font-size: 15px; } dl.accordion dt::before { content: ''; position: relative; float: right; border: 8px solid transparent; border-top-color: #fff; width: 0; height: 0; top: 5px; right: -20px; } dl.accordion dt.open::before { content: ''; position: relative; float: right; border: 8px solid transparent; border-bottom-color: #fff; width: 0; height: 0; top: -5px; right: -20px; } dl.accordion dd { word-wrap:break-word; } dl.accordion dd ul li { border-bottom: 1px solid #f2f2f3; list-style: none; } dl.accordion dd ul li a { color: #333; display: block; padding: 10px 30px 10px 15px; } dl.accordion dd ul li a::before { content: ''; position: relative; float: right; border: 8px solid transparent; border-left-color: #333; width: 0; height: 0; top: 0; right: -25px; } |
きっともっと良い方法があると思います。
cssはsassで出力したので、余計なタグは消してください。
おかしい部分がありましたら適宜修正して利用してください。
これからもっとjQueryを勉強してサンプルを書いていこうと思います。
【おすすめ本】 Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る
価格： ￥ 3,024
jQueryを学び始める最初の一冊として購入しました。
jQueryの基礎知識についての解説や、サンプルのコードの解説が丁寧なので、技術本を読むのが苦手な人（私のことです）でも理解しやすいかと思います。