アコーディオンメニュー

アコーディオンメニュー

• 最初からすべての情報を表示するのではなく、次の段階に選択しやすいように見せないようにしておく
• はじめはコンテンツが見えない（クリックすると内容が見えることを明示するために、一つ目は開けておく）
• ユーザー自身が積極的に探し、クリックして開くというアクションを起こしやすい

アコーディオンメニューの特徴

• 見せるコンテンツの隣にナビゲーションリンクがある

HTMLの記述

1. 定義型リストを利用する
2. 見出しと段落を利用する
3. 番号なしリストを利用する

1. 定義型リスト

<dl class="accordion">
<dt>おすすめ</dt>
<dd>ここにおすすめの内容が入ります。</dd>
<dt>イベント</dt>
<dd>ここにイベントの内容が入ります。</dd>
<dt>お知らせ</dt>
<dd>ここにお知らせの内容が入ります。</dd>
</dl>

2. 見出しと段落

<div class="accordion">
<div class="acdBox">
<h4 class="category">おすすめ</h4>
<p>ここにおすすめの内容が入ります。</p>
</div><!-- /.acdBox -->
<div class="acdBox">
<h4 class="category">イベント</h4>
<p>ここにイベントの内容が入ります。</p>
</div><!-- /.acdBox -->
<div class="acdBox">
<h4 class="category">お知らせ</h4>
<p>ここにお知らせの内容が入ります。</p>
</div><!-- /.acdBox -->
</div><!-- /.accordion -->

3. 番号なし箇条書き

<div class="accordion">
<ul class="nav"> 
  <li>
  <div class="category">家具・インテリア</div>
    <ul class="menu"> 
    <li><a href="#">ソファ</a></li> 
    <li><a href="#">ベッド</a></li> 
    <li><a href="#">テーブル</a></li> 
    <li><a href="#">チェア</a></li> 
    </ul> 
  </li>
  <li>
  <div class="category">ステーショナリー</div>
    <ul class="menu"> 
    <li><a href="#">ペン・鉛筆</a></li> 
    <li><a href="#">ノート</a></li> 
    <li><a href="#">ファイル</a></li> 
    <li><a href="#">付箋</a></li> 
    </ul> 
  </li> 
  <li>
  <div class="category">生活雑貨</div>
    <ul class="menu"> 
    <li><a href="#">キッチン用品</a></li> 
    <li><a href="#">掃除・洗濯用品</a></li> 
    <li><a href="#">バス・トイレ用品</a></li> 
    <li><a href="#">その他</a></li> 
    </ul> 
  </li> 
</ul><!-- /.nav -->
</div><!-- /.accordion -->

上の記述を見てわかるように「定義型リスト」で練習することがもっとも効率的です。

html, body, h1, h2, h3, h4, p, dl, dt, dd, ul,li {
  margin:0;
  padding:0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul { list-style: none; }
a { text-decoration: none; }
body {
  background: #FFF;
  font-size: 16px;
}
.accordion {
  width:400px;
  margin:50px auto;
}
.accordion dt{
  background: #7CADB6;
  border-bottom: 1px solid #FFF;
  cursor: pointer;
  padding: 12px 1em 10px 1em;
  color: #FFF;
  font-size: 18px;
  font-weight: bold;
}
.accordion dd{
  border: 1px solid #7CADB6;
  border-top: none;
  height: 160px;
  padding: 1em;
}

jQueryを記述

• セレクタを読み終わって準備ができたら処理を実行する

$(function(){
  //処理
});

• コンテンツはすべて隠す

$(function(){
  $( '.accordion>dd' ).hide();
});

• クリックされたとき（dtがクリックされたとき）

$(function(){
  $( '.accordion>dd' ).hide();
  $( '.accordion>dt' ).on( 'click', function() {
  　　//処理
  });
});

• 処理（押されたdtの隣にあるddが閉じられていたら開く）

  if($($( this ).next()).css( 'display' ) == 'none' ){
    $( this ).next().slideDown();
  }

これだけの記述では開くための命令だけのため、同時に閉じる命令も記述します。

    if($( this ).next().css( 'display' )== 'none' ) {
      $('.accordion>dd' ).slideUp();
      $( this ).next().slideDown();
    }

この場合、開く処理と同時に閉じる処理をするために、すでに開いている隣のdtは、クリックしても何も起こりません。
クリックする度にコンテンツを閉じたい場合には、slideUp()の１行をif文の上に行に移します。

• １個めのコンテンツは開いておいて、その他のタブにもコンテンツが隠れていることを明示します（１個め以外は隠す）

  $( '.accordion>dd:not(:first)' ).hide();

• まとめ

$(function(){
  $( '.accordion>dd:not(:first)' ).hide();
  $( '.accordion>dt' ).on( 'click', function() {
    if($( this ).next().css( 'display' )== 'none' ) {
      $('.accordion>dd' ).slideUp();
      $( this ).next().slideDown();
    }
  });
});

パネルが開いているカテゴリの色を変える

• addClass( )メソッド

$(function(){
  $( '.accordion>dd:not(:first)' ).hide();
  $( '.accordion>dt:first' ).addClass( 'open' );
  $( '.accordion>dt' ).on( 'click', function() {
    if($( this ).next().css( 'display' )== 'none' ) {
      $('.accordion>dd' ).slideUp();
      $( this ).next().slideDown();
    }
  });
});

• removeClass( )メソッド

$(function(){
  $( '.accordion>dd:not(:first)' ).hide();
  $( '.accordion>dt:first' ).addClass( 'open' );
  $( '.accordion>dt' ).on( 'click', function() {
    if($( this ).next().css( 'display' )== 'none' ) {
      $('.accordion>dd' ).slideUp();
      $( '.accordion>dt' ).removeClass( 'open' );
      $( this ).next().slideDown();
      $( this ).addClass( 'open' );
    }
  });
});

テキスト例

• 隣接セレクタで記述
• ddはdtの下層ではなくdtの兄弟のため隣接セレクタを使う必要があります（'this dd'とは記述できない）

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

$(this + dd)と記述しない理由

• thisオブジェクトプラス未定義変数ddという文字列連結になってしまうから

thisとは

• console.log(this); と記述してthisが取得している値を確認する