実践演習-アコーディオン - web-0127のブログ

40分で覚える！jQuery速習講座

jQueryのコードを記述する場所

上のコードは$(document).ready()の省略形

要素を指定するためのセレクター

セレクターで「操作が発生した要素」や「変更したい要素」を指定する

id属性が「main」の要素内に存在するimg要素を指定

jQueryでHTML/CSSを操作する

処理のタイミングを決める「イベント」

jQueryでアニメーション効果を付ける

「スピード」は、slow／normal／fastのいずれか、またはミリ秒（1秒＝1000秒）単位で数字を指定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオン</title>
<style>
* {
  margin:0;
  padding:0;
}
dl {
  width:400px;
  margin:50px auto;
}
dt {
  background:#7CADB6;
  border-bottom:1px solid #FFF;
  cursor:pointer;
  padding: 8px 6px 6px 8px;
  color:#FFF;
  font-weight:bold;
}
dd {
  border:1px solid #7CADB6;
  border-top:none;
  height:300px;
  padding: 12px;
}
</style>
</head>
<body>
<dl>
<dt>テキスト1</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>テキスト2</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>テキスト3</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
</dl>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
  $('dd:not(:first)').css('display','none')
  $('dt').click(function(){
    if($('+dd',this).css('display')=='none'){
    $('dd').slideUp('slow');
    $('+dd',this).slideDown('slow');
  }
  });
});
</script>
</body>
</html>

（1）jQueryの命令を記述する場所を記述

$(function(){
    (中略)
});

（2）セレクターに1番目以外のパネル（dd要素）を指定

1番目以外のdd要素に対して、css()でdisplayプロパティをnoneに変更
この処理によって最初のパネル以外は非表示になり、アコーディオンパネルの初期状態になります

$(function(){  
  $("dd:not(:first)").css("display","none");
});

（3）ラベル(dt要素)に対してイベントを設定

dt要素がクリック（click）されるとclick(function(){…})内の処理を実行する

$(function(){  
  $("dd:not(:first)").css("display","none");
  $("dt").click(function(){
       (中略)
  });
});

（4）JavaScriptのif文を使って、処理を実行する条件を指定

セレクターで指定した要素のdisplayプロパティがnoneなら、{…}内に書かれた命令を実行する
セレクターの後ろにある,（カンマ）は、セレクターの影響範囲を指定
すぐ後ろになるthisは、イベントが発生した要素、このサンプルではクリックされたdt要素を表す
$("+dd",this) は、クリックされたdt要素の次に登場するdd要素を指します
現在閉じているパネルに対応するラベルがクリックされた場合のみ、{…}内の命令が実行されます

$(function(){  
  $("dd:not(:first)").css("display","none");
  $("dt").click(function(){
      if($("+dd",this).css("display")=="none"){
           (中略)
      }
  });
});

（5）すべてのdd要素に対してslideUp()を適用

slideUp()は、表示されている要素をスライドさせながら非表示にする命令です

$(function(){  
  $("dd:not(:first)").css("display","none");
  $("dt").click(function(){
      if($("+dd",this).css("display")=="none"){
         $("dd").slideUp("slow");
      }
  });
});

（6）クリックされたラベルに対応するパネル部分をアニメーション付きでスライド

セレクター$("+dd",this)は、クリックされた要素（dt要素）の次に登場するdd要素という意味
スライドアニメーション付きで要素を表示する命令はslideDown()です

$(function(){  
  $("dd:not(:first)").css("display","none");
  $("dt").click(function(){
      if($("+dd",this).css("display")=="none"){
         $("dd").slideUp("slow");
         $('+dd',this).slideDown('slow');
      }
  });
});

アコーディオン - Query基本形

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオン</title>
<style>
#faq {
  width: 500px;
}
.question {
  padding:5px;
  font-weight:bold;
  font-family:Arial;
  font-size:16px;
  border:1px solid #ddd;
  background:#eee;
  cursor: pointer;
}
.answer {
  padding:25px;
  font-family:Arial;
  font-size:13px;
  border:1px solid #ddd;
}
</style>
</head>
<body>
<div id="faq">
<div class="question">Question 01</div>
<div class="answer">Answer 01<br>Answer 01<br>Answer 01<br>Answer 01<br></div>
<div class="question">Question 02</div>
<div class="answer">Answer 02<br>Answer 02<br>Answer 02<br>Answer 02<br></div>
<div class="question">Question 03</div>
<div class="answer">Answer 03<br>Answer 03<br>Answer 03<br>Answer 03<br></div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
//最初以外を隠す
$('#faq .answer').not(':first').hide();
//クリックイベント
$('#faq .question').click(function() {
//スライドの処理
    if($(this).next('.answer').is(':visible')) {
        $(this).next('.answer').slideUp(300);
    } else {
        $(this).next('.answer').slideDown(300).siblings('.answer').slideUp(300);
    }
});
</script>
</body>
</html>

アコーディオン（アニメーションなし）

<dl class="accordion">
<dt>Item1</dt>
<dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd>
<dt>Item2</dt>
<dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd>
<dt>Item3</dt>
<dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd>
</dl>
<dl class="accordion">
<dt>Item1</dt>
<dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd>
<dt>Item2</dt>
<dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd>
<dt>Item3</dt>
<dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd>
</dl>

$(function(){
  $('.accordion').each(function(){
    var dl = $(this);
    var allDt = dl.find('dt');
    var allDd = dl.find('dd');
    allDd.hide();
        allDt.css('cursor','pointer');
    allDt.click(function(){
      var dt = $(this);
      var dd = dt.next();
      allDd.hide();
      dd.show();
      allDt.css('cursor','pointer');
      dt.css('cursor','default');
    });
  });
});

 * {
  margin:0;
  padding:0;
  line-height:1.4;
}
body{
  padding:40px;
  font-family:Arial, Helvetica, sans-serif;
}
dl{
  width:320px;
  margin:0 0 20px;
}
dt{
  padding:6px 10px 6px;
  background:#444;
  color:#fff;
  margin:0 0 3px;
  font-weight:bold;
  border-radius:8px 0 0 0;
  border-left:2px solid #444;
  border-top:2px solid #444;
}
dd{
  padding:8px 10px 12px;
  width:298px;
  border-left:2px solid #444;
  background:#eee;
  margin:-3px 0 3px;
}

CSSでアコーディオンパネル

HTMLの記述

「unordered list」または「definition list」を設定する
「unordered list」の中に「definition list」をネストすることも可能（例では、見出しと本文のセット）
マウスオーバーではなく、クリックの場合はjQueryを利用します

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>垂直タイプのアコーディオン式メニュー</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<ul class="accordion">
<li>
<div>
<h2>特長1</h2>
<p>特長1の詳細</p>
</div>
</li>
<li>
<div>
<h2>特長2</h2>
<p>特長2の詳細</p>
</div>
</li>
<li>
<div>
<h2>特長3</h2>
<p>特長3の詳細</p>
</div>
</li>
<li>
<div>
<h2>特長4</h2>
<p>特長4の詳細</p>
</div>
</li>
<li>
<div>
<h2>特長5</h2>
<p>特長5の詳細</p>
</div>
</li>
</ul>
</body>
</html>

@charset "UTF-8";

/*reset*/
* {
  margin:0;
  padding:0;
}

/*menu*/
.accordion {
  width: 400px;
  height: 300px;
  margin-left:10px; /*ブラウザ上の左の空き*/
}
.accordion li {
  color: #555;
  background: #fff;
  margin-bottom:5px;
  height:20%;
  overflow: hidden;
	-webkit-transition:all 0.4s ease-in;
	transition: 0.4s all ease-in;
	-moz-transition:all 0.4s ease-in;
	-o-transition:all 0.4s ease-in;
}
.accordion li:hover {
  height:70%;
}
.accordion li h2 {
  color: #333;
  margin-bottom: 10px;
  padding: 5px;
  background: #eee;
  border: 1px solid #ccc;	
}
.accordion li:hover h2 {
  color: #fff;
  background:#81AF86;
  border: 1px solid #ccc;
}
.accordion li div {
  padding-top:12px;
}