CODING

[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を使えばほんの数行でアコーディオンを作ることができて便利ですね。



-CODING
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[HTML] 表を作るtable

どうも、べ〜やんです。 今回はHTMLでtableタグを使って表を作る方法を紹介します。 表の例 表を使う 表を使うと伝えたい情報を分かりやすく伝えることができます。 HTMLには簡単に表を作れる便利 …

[CSS] 自動ナンバリングする方法

どうも、べ〜やんです。 今回は、counterを使って自動でナンバリングする方法を紹介します。 自動ナンバリング 見出しなどに番号をつけて表示する場合に、手動で入力すると面倒ですし途中で順番が変わった …

[CSS] 変形transformの使い方

どうも、べ〜やんです。 今回は、デザインを変形させるtransformを紹介します。 transformとは transformは変形を指定するプロパティで、transitionとセットで使用すること …

爆速!!Emmetを使う

どうも、べ〜やんです。 今回は、コーディングのスピードが抜群に速くできる方法のEmmetの使い方を紹介します。 Emmetとは HTMLやCSSを記述するときに全て手打ちしていると時間がかかってしまい …

[超初心者] CSSの書き方

どうも、べ〜やんです。 今回はCSSに付いて超基本をざっくりまとめます。 CSSでできること CSSはwebページの見た目を整える働きがあります。背景色や文字色、デザインの位置や大きさの変更など、様々 …