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

アニメーションのような滑らから動きがない

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオン（アニメーションなし）</title>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<style>
 * {
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;
}

</style>
</head>
<body>

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

<script>
$(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');
    });
  });
});
</script>
</body>
</html>

ブラウザで表示【 Chrome 】

上下２段に分かれている

各段１つずつのパネルしか展開しない

PAGE TOP