読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

Accordion

アコーディオンメニュー

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオンパネル</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
body, div, dl, dt, dd {
  margin:0;
  padding:0;
}
dl{
  width:400px;
  margin:50px auto;
}
dl dt{
  background: #7CADB6;
  border-bottom: 1px solid #FFF;
  cursor: pointer;
  padding: 6px 5px 5px 1em;
  color: #FFF;
}
dl dd{
  border: 1px solid #7CADB6;
  border-top: none;
  height: 200px;
  padding: 1em;
}
</style>
</head>
<body>
<div id="container">
<dl>
<dt>Item1</dt>
<dd>Item1 content<br>テキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストA</dd>
<dt>Item2</dt>
<dd>Item2 content<br>テキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストB</dd>
<dt>Item3</dt>
<dd>Item3 content<br>テキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストC</dd>
</dl>
</div>
<script>
$(function(){
  $( 'dd' ).css( 'display', 'none' );
  $( 'dl 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');
      }
  });
});
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオンパネル</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
body, div, dl, dt, dd {
  margin: 0;
  padding: 0;
}
#wrapMenu {
  width: 500px;
  margin: 50px auto;
}
.question {
  padding: 10px;
  font-size:18px;
  font-family: Arial;
  font-weight: bold;
  border: 1px solid #DDD;
  background: #EEE;
  cursor: pointer;
}
.answer {
  padding: 25px;
  font-size: 16px;
  font-family: Arial;
  border: 1px solid #DDD;
}
</style>
</head>
<body>
<dl id="wrapMenu">
<dt class="question">Question 01</div>
<dd class="answer">Answer 01<br>Answer 01<br>Answer 01<br>Answer 01</dd>
<dt class="question">Question 02</div>
<dd class="answer">Answer 02<br>Answer 02<br>Answer 02<br>Answer 02</dd>
<dt class="question">Question 03</div>
<dd class="answer">Answer 03<br>Answer 03<br>Answer 03<br>Answer 03</dd>
</div>

<script>
//最初以外を隠す
$( '#wrapMenu .answer' ).not( ':first' ).hide();
//クリックイベント
$( '#wrapMenu .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>

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;
}


広告を非表示にする