[jQuery] jQueryのアコーディオンの作り方

どうも、べ〜やんです。

今回は、jQueryでのアコーディオンの作り方を紹介したいと思います。

アコーディオンとは

よくメニューバーやQ&Aなどで使われているクリックすると、楽器のアコーディオンのようにビロビロ〜と隠れていた部分がでてくる動きのやつです。

作り方

まずHTMLとCSSを用意します。

今回使用するHTMLはこちら↓

<ul id="accordion">
  <li>
    <p class="accordion">クリック1</p>
    <ul class="inner">
      <li class="content1">中身1</li>
      <li class="content2">中身2</li>
      <li class="content3">中身3</li>
    </ul>
  </li>
  <li>
    <p class="accordion">クリック2</p>
    <ul class="inner">
      <li class="content1">中身1</li>
      <li class="content2">中身2</li>
      <li class="content3">中身3</li>
    </ul>
  </li>
  <li>
    <p class="accordion">クリック3</p>
    <ul class="inner">
      <li class="content1">中身1</li>
      <li class="content2">中身2</li>
      <li class="content3">中身3</li>
    </ul>
  </li>
</ul>

クリックで開閉

まずはシンプルにクリックすると開閉するアコーディオンです。

$('.inner').hide();

まずはアコーディオンの中身を非表示にします。

非表示にする場合は.hide;を使用します。$('.inner').hide();でinnerクラスを非表示にしています。

$('#accordion p').click(function(){

});

次は#accordionの中のp要素をクリックした場合に動き出すようにしています。

.click(function(){ });の中にどんな動作をするかを指定します。

$(this).next().slideToggle();

$(this)は複数ある#accordionの中のp要素の内のクリックされたp要素のことです。

.next()は隣接した要素に〜という意味です。

ここでは<ul class="inner">の部分です。

.slideToggle()は選択された要素が閉じていたら開く、開いていたら閉じるという動作を与えるものです。

jQuery全体↓

$(function(){
  
  $('.inner').hide();
  
	$('#accordion p').click(function(){
	  $(this).next().slideToggle();
	});
  
});

See the Pen LYYOMVX by beeyan (@orientado) on CodePen.

ひとつ開いたら他が閉じる

次はひとつが開いたら他の開いてた部分が閉じるタイプです。

上記のタイプに$('#accordion p').not($(this)).next().slideUp();の一文が追加されているだけです。

$('#accordion p').not($(this)).next().slideUp();

.not($(this))は複数ある#accordionの中のp要素の内のクリックされたp要素以外のp要素のことです。

.slideUp()は下から上に滑るような動作のことです。

つまり、選択されたp要素以外のp要素に隣接した要素を下から上にあげる動作をさせるという意味になります。

jQuery全体↓

$(function(){
  
  $('.inner').hide();
  
	$('#accordion p').click(function(){
	  $(this).next().slideToggle();
    $('#accordion p').not($(this)).next().slideUp();
	});
  
});

See the Pen VwwrgpK by beeyan (@orientado) on CodePen.

ひとつだけ開いておく

最初にひとつだけ開いておくタイプです。アコーディオンであることがわかりやすいですね。

今回はCSSで中身を非表示にしています。

innerクラスにdisplay: none;を与えて非表示に。

最初のinnerクラスの要素だけにopenクラスを追加して、openクラスにdisplay: block;を与えて表示状態にしています。

<ul id="accordion">
  <li>
    <p class="accordion">クリック1</p>
    <ul class="inner open">
      <li class="content1">中身1</li>
      <li class="content2">中身2</li>
      <li class="content3">中身3</li>
    </ul>

jQueryの$('.inner').hide();は使用していません。あとは上記のタイプと同じです。

jQuery全体↓

$(function(){
  
	$('#accordion p').click(function(){
	  $(this).next().slideToggle();
    $('#accordion p').not($(this)).next().slideUp();
	});
  
});

See the Pen NWWXKQo by beeyan (@orientado) on CodePen.

横に開く

まずCSSのflexboxを使って横並びにしています。

$('#accordion p').not($(this)).next().animate({width:'hide'});

.animate({width:'hide'})で横幅を非表示にします。

$(this).next().animate({width:'toggle'});
	});

.animate({width:'toggle'})で横幅を開いたり閉じたりします。

jQuery全体↓

$(function(){
  
  $('.inner').hide();
  
	$('#accordion p').click(function(){
    $('#accordion p').not($(this)).next().animate({width:'hide'}); 
    $(this).next().animate({width:'toggle'});
	});
});

See the Pen NWWwogz by beeyan (@orientado) on CodePen.

おわりに

今回は、jQueryでのアコーディオンの作り方を紹介しました。

jQueryを使えばほんの数行でアコーディオンを作ることができて便利ですね。