SHU BLOG

BLOG NEWS ブログ

TITLE

【jQuery】クリックで開く、閉じる、accordion.jsの使い方を解説!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【jQuery】クリックで開く、閉じる、accordion.jsの使い方を解説!
の解説になります!

こんな方に読んでほしい

  • jQueryを学び始めた方へ
  • プラグインのaccordion.jsを使って開く・閉じる(アコーディオン)を作成したい方向け
  • 今回はaccordion.jsについて解説しております。

今回は、開く・閉じる(ドロップダウン)についての解説になります。
accordion.js」になりますが、今でも簡単で使いやすいプラグインになっております。

イメージ図は上記のようになります。
1つ目のメニューをクリックすると、コンテンツ内容が表示し、2つ目のメニューをクリックすると
1つ目のメニューが閉じるような仕様になっております。

accordionについて

accordionについて

accordion.jsとは、開く・閉じる(アコーディオン)のことを示します。
jQueryが苦手な方でも問題ありません。
まずは下記のサイトから「accordion.js」をダウンロードしましょう。

accordionにアクセス
1https://github.com/ajayy004/accordion
「Code」ボタンをクリック
2
「Download ZIP」ボタンをクリック
3

必要なファイルについて

ダウンロード後に必要なファイルについて解説していきます。
まずは、ファイル名の「accordion-master」をご確認ください。

jsファイル
1「js」 > 「accordion-min.js」の1点を使用します。
<!--js-->
<script src="js/accordion-min.js" type="text/javascript"></script>

また、「accordion-min.js」を使用する際には、accordionを使用する宣言をしなければなりません。
以下のコードを合わせて指定しましょう。

<!--js-->
<script src="js/accordion-min.js" type="text/javascript"></script>
<script>
  $(document).ready(function(){
    $("#〇〇").accordion({
    });
  });
</script>

「accordion-min.js」と繋げて記述するのが良いでしょう。
また、ファイルの階層は、ご自身のフォルダに合わせてください。

次に、jquery本体のプラグイン設置します。
今回は2つ目のパターンを採用して解説します。

1つ目は、ファイルをダウンロードして使用するパターン、
2つ目は、ファイルをダウンロードせずに、「URL」から読み込むパターンになります。
どちらでも問題ありません。

<!--js-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/accordion-min.js" type="text/javascript"></script>
<script>
  $(document).ready(function(){
    $("#〇〇").accordion({
    });
  });
</script>

必ず、jquery本体のプラグイン上、accordionを下に設置しましょう。
jqueryをダウンロードしたい方は、こちらのリンクから。

記述場所について

基本的にはbody内に指定するようにしましょう。
基本構造の書き方は以下のようになります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>【jQuery】クリックで開く、閉じる...</title>
</head>
<body>

 コンテンツが入ります。

<!--js-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/accordion-min.js" type="text/javascript"></script>
<script>
  $(document).ready(function(){
    $("#〇〇").accordion({
    });
  });
</script>
</body>
</html>

アコーディオンの設定について

アコーディオンの設定について

次に、アコーディオンの設定について解説します。

アコーディオンの設定について

デモサイトはコチラから。
基本構造の書き方は以下のようになります。

アコーディオンの設定

<ul id="accordion">
	<li>
		<div class="topWrap">赤色とは</div>
		<div class="details">
		  <p>赤色(情熱・強さ)<br>
			情熱・強さ・生命力・活動...</p>
		</div><!--details-->
	</li>
	<li>
		<div class="topWrap">橙色とは</div>
		<div class="details">
		  <p>橙色(ぬくもり・健康)<br>
			ぬくもり・健康・陽気・暖かさ...</p>
		</div><!--details-->
	</li>
	<li>
		<div class="topWrap">黄色とは</div>
		<div class="details">
		  <p>黄色(はつらつ・エネルギー)<br>
			はつらつ・陽気・活気・希望...</p>
		</div><!--details-->
	</li>
</ul>
/*--CSSは自由に変更可--*/
/*--タイトル部分--*/
.topWrap {
	font-size: 1.3rem;
	padding: .5em 1.6em;
	box-sizing: border-box;
	border-left: solid 10px #fd6158;
	background-color: #f9f9f9;
	cursor: pointer;
	transition: background-color 1s;
}

.topWrap:hover {
	background-color: #fd6158;
	color: #fff;
	border-left: solid 10px #333333;
	transition: background-color 1s;
}

/*--コンテンツ部分--*/
.details {
	font-size: .9rem;
	line-height: 2;
	padding: 1.5em;
	box-sizing: border-box;
	background-color: #f9f9f9;
	border-bottom: solid 10px #fd6158;
}
  $(document).ready(function(){
    $("#accordion").accordion({
	  tabClick: ".topWrap", 
      tabContent: ".details",
	  accordAnimation: 1000,
	  spaceTop: 0,
	  closeOther : true
    });
  });

親要素は、#accordionを指定しています。
ここは、$("#accordion").accordionと同じid名にするようにしましょう。

タイトル部分には、.topWrapを指定しています。
tabClick: ".topWrap"と同じクラス名にするようにしましょう。

コンテンツ部分には、.detailsを指定しています。
tabContent: ".details"と同じクラス名にするようにしましょう。

オプションについて

オプションでは、開く、閉じる時間などの指定が可能です。
一部ご紹介します。

指定できる値
  • tabClick
    タイトル部分のクラス名を指定します。
  • tabContent
    コンテンツ部分のクラス名を指定します。
  • accordAnimation
    アコーディオンを開くた際のアニメーション時間を指定します。
  • bodyAnimation
    スライド中、次のメニューに移動する際のアニメーション時間を指定します。
  • spaceTop
    アコーディオンの高さを指定します。
    spaceTop: “100”の場合は上から100pxの高さを維持した状態で開き、閉じるを行います。
  • closeOther
    他のタブをクリックすると、前のタブを閉じます。

こちらのサイトで他にも解説しております。

まとめ

今回はこれで以上です。

POINT
  • accordionとは、開く・閉じる(アコーディオン)のことを示します。
  • 必要なファイルはaccordion-min.jsの1点になります。
  • こちらにデモサイトを用意しました。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top