jQuery

「slideToggle」を使ったアコーディオン実装

html

                  

  
    
      タイトル 01
      テキスト01 テキスト01 テキスト01 テキスト01 テキスト01 テキスト01
    
    
      タイトル 02
      テキスト02 テキスト02 テキスト02 テキスト02 テキスト02 テキスト02
    
    
      タイトル 03
      テキスト03 テキスト03 テキスト03 テキスト03 テキスト03 テキスト03

・htmlソースは一緒

slideToggle / シンプル版

jQuery

                  
$(function(){
  $('.accordion dd').hide();
  $('.accordion dt').on('click', function () {
    $(this).next().slideToggle(300);
    $(this).toggleClass("is-open");
  });
});

slideToggle / 一つ開けると他は閉じる

jQuery

                  
$(function(){
  $('.accordion dd').hide();
  $('.accordion dt').on('click', function () {
    $('.accordion dt').not(this).removeClass('is-open').next().slideUp(300);
    $(this).toggleClass('is-open').next().slideToggle(300);
  });
});

slideToggle / 一つ開けると他は閉じる（一番目は開けておく）

jQuery

                  
$(function(){
  // 最初のコンテンツ以外は非表示
  $(".accordion dl:not(:first-of-type) dd").css("display", "none");
  $(".accordion dl:first-of-type dt").addClass("is-open");

	$('.accordion dt').on('click', function () {
		$('.accordion dt').not(this).removeClass('is-open').next().slideUp(300);
		$(this).toggleClass('is-open').next().slideToggle(300);
	});
});