縦の動き slideDown / slideUp / slideToggle

slideDown / slideUp

  • displayがblockに、noneに変化する途中のアニメーション効果


f:id:pbhfq:20170626001957p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アコーディオンパネル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<dl class="section">
<dt class="open">カテゴリーA</dt>
<dd>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。</dd>
<dt>カテゴリーB</dt>
<dd>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。</dd>
<dt>カテゴリーC</dt>
<dd>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。</dd>
</dl>
</div><!-- /.content -->
<script>
$(document).ready(function(){
  $('dd:not(:first)').hide();
  $('dt').on('click', function(){
    $('dd').slideUp();
    $('dt').removeClass('open');
    $(this).next().slideDown();
    $(this).addClass('open');
  });
});
</script>
</body>
</html>

slideToggle

  • 一つのイベントで表示・非表示を切り替えるアニメーション効果

f:id:pbhfq:20170626013310p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>縦の動き</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<div class="content">
<dl class="menu">
<dt>ドリンクメニュー</dt>
<dd>
<ul>
<li>ウーロン茶</li>
<li>コーラ</li>
<li>オレンジジュース</li>
<li>ミネラルウォーター</li>
</ul>
</dd>
</dl>
</div>
<script>
$(document).ready(function(){
  $('.menu dt').on('click', function(){
    $(this).next().slideToggle();
  });
});
</script>
</body>
</html>

求職者支援訓練 フェリカテクニカルアカデミー