アコーディオン – サンプル集

https://www.rural-web.com/coding/2494

2019/10/15

はじめに

本記事について

本記事は、【アコーディオンを実装するためのサンプル】をまとめたものです。
利用できる方は、お好きに活用してください。

当サイトで公開している「ruralweb.css（準備中）」をご自身のサイトに読み込ませておけば、各サンプルに指定されているクラスを挿入するだけで再現できることを目標にしています。もし個々に利用する場合は、各サンプルのソースをコピペしてご利用ください。

検証ブラウザ・OS

サンプル内容につきましては、最新ブラウザ・OS（IE/Chrome/Safari/FireFox/iOS/Android）で検証しております。基本的にIE9以下などのブラウザでは検証しておりませんが、たまに適用していたり説明してあるところは仕事でやむなく対応した時のものです。

注意事項

自身の仕事効率化を目的としていますので、表示・不具合等による損失につきまして一切の補償をいたしませんのでご理解ください。但し、公開しているサンプル内容の修正・改善はできる限りしていきますので、お気づきの点がございましたらTwitterよりご連絡ください。

コードサンプル

ベーシックタイプ

基本型

クリック: ここにコンテンツを表示

クラス名

rw-acc

説明

jquery読み込み必須（ここでは3.3.1を利用）
レスポンシブ対応
複数設置可、非連動なので個別に作動
dlタグのみ
アイコン利用のためFontAwesome導入
最初に表示させておきたい場合は、dtに対してclass="on"と、ddに対してstyle:display:block;を付与させる

コードを表示

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

$('.rw-acc > dt').click(function() {
	$(this).toggleClass('on');
	$(this).next().slideToggle('fast');
});

<dl class="rw-acc">
	<dt>クリック</dt>
	<dd>ここにコンテンツを表示</dd>
</dl>

dl.rw-acc {
	width:100%;
	margin:30px auto 0;
}
dl.rw-acc > dt {
	position:relative;
	display:block;
	background-color:#1a73e8;
	color:#fff;
	text-align:center;
	padding:10px 15px;
	cursor:pointer;
}
dl.rw-acc > dt::after {
	font-family: FontAwesome;
    content: "\f067";
    margin-left:5px;
}
dl.rw-acc > dt.on::after {
   content: "\f068";
}
dl.rw-acc > dt:hover {
	background-color:#2b7de9;
}
dl.rw-acc > dd {
	display:none;
}

最終更新：2019.10.14

連動型

クリック: 1-1コンテンツを表示
クリック: 1-2コンテンツを表示

クラス名

rw-acc-mix

説明

jquery読み込み必須（ここでは3.3.1を利用）
レスポンシブ対応
複数設置可、連動型なので同時に2つ開かない
dlタグのみ
アイコン利用のためFontAwesome導入
最初に表示させておきたい場合は、dtに対してclass="on"と、ddに対してstyle:display:block;を付与させる（1箇所のみ）

コードを表示

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

$('.rw-acc-mix > dt').click(function () {
	$('.rw-acc-mix > dt').siblings().not(this).removeClass('on');
	$(this).parent().children('.rw-acc-mix > dd').not($(this).next('dd')).slideUp('fast');
	$(this).toggleClass('on');
	$(this).next().slideToggle('fast');
});

<dl class="rw-acc-mix">
	<dt class="on">クリック</dt>
	<dd style="display:block;">ここにコンテンツを表示</dd>
	<dt>クリック</dt>
	<dd>ここにコンテンツを表示</dd>
</dl>

dl.rw-acc-mix {
	width:100%;
	margin:30px auto 0;
}
dl.rw-acc-mix > dt {
	position:relative;
	display:block;
	background-color:#1a73e8;
	margin-top:1px;
	color:#fff;
	text-align:center;
	padding:10px 15px;
	cursor:pointer;
}
dl.rw-acc-mix > dt:first-child {
	margin-top:0;
}
dl.rw-acc-mix > dt::after {
	font-family: FontAwesome;
    content: "\f067";
    margin-left:5px;
}
dl.rw-acc-mix > dt.on::after {
   content: "\f068";
}
dl.rw-acc-mix > dt:hover {
	background-color:#2b7de9;
}
dl.rw-acc-mix > dd {
	display:none;
}

最終更新：2019.10.14

更新履歴

更新日時	更新内容
2019.10.14	記事を作成