[jQuery] アコーディオン風に開くメニューを作る

投稿日：2017年8月18日更新日：2018年4月28日

アコーディオン風に開くメニューのサンプルです。

サンプルソース

例）アコーディオン風に開くメニュー

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  //初期状態は閉じておく
  $('.accord dd').hide();

  //クリック時イベント
  $('.accord dt').click(function(e){
    $('+dd', this).slideToggle(300);  //0.3秒かけてアニメーション
  })
});
</script>
<style>
dl.accord{
  width:300px;
}

dl.accord dt{
  background-color:#8080ff;
  color:#ffffff;
  font-weight:bold;
  padding:5px 10px;
  margin-bottom:1px;
  cursor:pointer;
}

dl.accord dd{
  border:1px solid #a0a0a0;
  margin:1px 0px;
  padding:5px;
}
</style>
</head>
<body>
<dl class="accord">
  <dt>メニュー１</dt>
  <dd>あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ</dd>
  <dt>メニュー２</dt>
  <dd>あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ</dd>
  <dt>メニュー３</dt>
  <dd>あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ</dd>
</dl>
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

//初期状態は閉じておく

$('.accord dd').hide();

//クリック時イベント

$('.accord dt').click(function(e){

$('+dd', this).slideToggle(300); //0.3秒かけてアニメーション

})

});

</script>

<style>

dl.accord{

width:300px;

}

dl.accord dt{

background-color:#8080ff;

color:#ffffff;

font-weight:bold;

padding:5px 10px;

margin-bottom:1px;

cursor:pointer;

}

dl.accord dd{

border:1px solid #a0a0a0;

margin:1px 0px;

padding:5px;

}

</style>

</head>

<body>

<dd>あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ</dd>

<dd>あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ</dd>

<dd>あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ</dd>

</dl>

</body>

</html>

実行サンプル

動作確認ができます。

メニュー１: あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ
メニュー２: あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ
メニュー３: あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ

解説

アニメーション速度を変更したい場合は、14行目のミリ秒を変更してください。

執筆者：とら