jQuery

「slideUp・slideDown」を使ったアコーディオン実装

html

                  

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

・htmlソースは一緒

slideUp・slideDown / シンプル版

jQuery

                  
$(function(){
	$('.accordion dd').hide();
	$('.accordion dt').on('click', function () {
		if (
			$(this).next().css('display') == 'none') {
			$(this).next().slideDown(300);
			$(this).addClass('is-open');
		} else if (
			$(this).next().css('display') == 'block') {
			$(this).next().slideUp(300);
			$(this).removeClass('is-open');
		}
	});
});

slideUp・slideDown / 一つ開けると他は閉じる

jQuery

                  
$(function(){
	$('.accordion dd').hide();
	$('.accordion dt').on('click', function () {
		if (
			$(this).next().css('display') == 'none') {
			$(this).next().slideDown(300);
			$(this).addClass('is-open');
			$('.accordion dt').not($(this)).siblings('.accordion dd').slideUp(300);
			$('.accordion dt').not($(this)).removeClass('is-open');
		} else if (
			$(this).next().css('display') == 'block') {
			$(this).next().slideUp(300);
			$(this).removeClass('is-open');
		}
	});
});

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

jQuery

                  
$(function(){
//class付与して一つ目を開ける
  $(".accordion dl:first-of-type dt").addClass("is-open");
  $(".accordion dl:first-of-type dd").addClass("is-open");

	$('.accordion dt').on('click', function () {
		if (
			$(this).next().css('display') == 'none') {
			$(this).next().slideDown(300);
			$(this).addClass('is-open');
			$('.accordion dt').not($(this)).siblings('.accordion dd').slideUp(300);
			$('.accordion dt').not($(this)).removeClass('is-open');
		} else if (
			$(this).next().css('display') == 'block') {
			$(this).next().slideUp(300);
			$(this).removeClass('is-open');
		}
	});
});