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

jQueryでアコーディオンパネルを作る

アコーディオンパネルの作成

ソースファイル

HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<link rel="stylesheet" href="css/style.css">
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
// $('dd').css('display', 'none');
// $('dd').hide();
// $('dd:first').slideDown('slow');
  $('dd:not(:first)').hide(); //一番上のdd以外は非表示にする
  $('.acco>dt').on('click',function(){//"acco"(dl)の1階層下のdtがclickされたら以下を実行
    if($($(this).next()).css('display') === 'none'){//clickされたdtの次要素ddが非表示なら
      $('dd').slideUp('slow');//全てのddをスライドアップして非表示にし、
      $('+dd',this).slideDown('slow');//clickされたdt直後の要素ddをスライドアップで表示
    }
  });

/*
  $('dd:not(:first)').css('display','none');//一番上のdd以外は非表示にする
  $('dl dt').on('click',function(){//dlの下の階層のdtがclickされたら以下を実行
    if($($(this).next()).css('display') === 'none'){//clickされたdtの次要素ddが非表示なら
      $('dd').slideUp('slow');//全てのddをスライドアップして非表示にし、
      $($(this).next()).slideDown('slow');//clickされたdtの次要素ddをスライドアップで表示
    }
  });
*/
});
</script>
</head>

<body>
<div id="container">
<dl class="acco">
<dt>項目 1</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>項目 2</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>項目 3</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
</dl>
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
html,body,dl,dt,dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family: "游ゴシック", YuGothic,
  "Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
  font-weight: 500;
}

#container {
  width: 500px;
  margin: 0 auto;
}
dt {
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: blue;
  border: solid 1px #000;
  font-weight: bold;
}
dd {
  height: 80px;
  border: solid 1px #000;
  border-top: none;
  padding: 10px 1em;
}

 実行結果

最初は”項目1”のみ表示されています。

f:id:develog:20160930205452p:plain

 

”項目2”をクリックすると、”項目1”はスライドアップして消えて、”項目2”がスライドダウンして表示されます。

f:id:develog:20160930205456p:plain

 

”項目3”をクリックすると、”項目2”はスライドアップして消えて、”項目3”がスライドダウンして表示されます。

f:id:develog:20160930205500p:plain