ACFのテキスト、リッチエディターで、アニメーション付きアコーディオンを作成

2024.05.13

以前のBLOGでも紹介しましたが、アコーディオンは、Easy Accordionなどのプラグインで実装できます。今回は、ACFのテキスト、リッチエディターでアニメーション付アコーディオンを作成する方法を紹介します。

出典 : Advanced Custom Fields(ACF)

今回のDEMOは、シンプルなデザインのFQAです。

ACF ACCORDION

ACCORDION

3つのアコーディオンが連動していて、一つのアコーディオンが開くと、他のアコーディオンが、アニメーションで閉じる仕組みになっています。また、右の＋マークが回転しながらーマークに変わります。

ACF設定

質問、回答、それぞれ3つのフィールドを作成します。

質問は、フィールドタイプをテキストに設定します。フィールドラベルに、編集画面に表示する名前を設定し、フィールド名にPHPに記入する名前を設定します。

質問は、フィールドタイプをテキストに設定

設定項目	設定値
フィールドタイプ	テキスト
フィールドラベル	質問01
フィールド名	add_question01
初期値	空欄

回答は、フィールドタイプをリッチエディター(WYSIWYG)に設定します。フィールドラベルに、編集画面に表示する名前を設定し、フィールド名にPHPに記入する名前を設定します。

回答は、フィールドタイプをリッチエディター(WYSIWYG)に設定

設定項目	設定値
フィールドタイプ	リッチエディター(WYSIWYG)
フィールドラベル	回答01
フィールド名	add_answer01
初期値	空欄

同じように残りの質問、回答のフィールドを作成します。これで、ACF設定は終了です。

同じように残りの質問、回答のフィールドを作成

コード

シングルページループ内に下記コードを記入します。

<div class="section acf_accordion">
	<?php if (get_field('add_question01')): ?>
  		<div class="accordion_one">
    		<div class="accordion_header"><?php the_field('add_question01'); ?><div class="i_box"><i class="one_i"></i></div></div>
    		<div class="accordion_inner">
      			<div class="box_one">
     				<?php the_field('add_answer01'); ?>
      			</div>
			</div>
		</div>
	<?php endif; ?>
	<?php if (get_field('add_question02')): ?>
  		<div class="accordion_one">
    		<div class="accordion_header"><?php the_field('add_question02'); ?><div class="i_box"><i class="one_i"></i></div></div>
    		<div class="accordion_inner">
      			<div class="box_one">
     				<?php the_field('add_answer02'); ?>
      			</div>
			</div>
		</div>
	<?php endif; ?>
	<?php if (get_field('add_question03')): ?>
  		<div class="accordion_one">
    		<div class="accordion_header"><?php the_field('add_question03'); ?><div class="i_box"><i class="one_i"></i></div></div>
    		<div class="accordion_inner">
      			<div class="box_one">
     				<?php the_field('add_answer03'); ?>
      			</div>
			</div>
		</div>
	<?php endif; ?>
</div>

CSSでスタイルを設定します。

.acf_accordion .accordion_one {
	width: 80%;
	max-width: 1200px;
	margin: 0 auto;
	border-bottom: solid 1px #bbb;
}

.acf_accordion .accordion_one .accordion_header {
	font-size: 1.2em;
	font-weight: 400;
	padding: 1em 50px 1em 0;
	text-align: left;
	position: relative;
	z-index: +1;
	cursor: pointer;
	transition-duration: 0.5s;
}

.acf_accordion .accordion_one .accordion_header:hover {
	opacity: .8;
}

.acf_accordion .accordion_one .accordion_header .i_box {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	right: 0%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	box-sizing: border-box;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transform-origin: center center;
	transition-duration: 0.2s;
}

.acf_accordion .accordion_one .accordion_header .i_box .one_i {
 	display: block;
	width: 18px;
	height: 18px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transform-origin: center center;
	transition-duration: 0.2s;
	position: relative;
}

.acf_accordion .accordion_one .accordion_header.open .i_box {
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

.acf_accordion .accordion_one .accordion_header .i_box .one_i:before, .acf_accordion .accordion_one .accordion_header .i_box .one_i:after {
	display: flex;
	content: '';
	background-color: #195300;
	border-radius: 10px;
	width: 18px;
	height: 4px;
	position: absolute;
	top: 7px;
	left: 0;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	transform-origin: center center;
}

.acf_accordion .accordion_one .accordion_header .i_box .one_i:before {
	width: 4px;
	height: 18px;
	top: 0;
	left: 7px;
}

.acf_accordion .accordion_one .accordion_header.open .i_box .one_i:before {
	content: none;
}

.acf_accordion .accordion_one .accordion_header.open .i_box .one_i:after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.acf_accordion .accordion_one .accordion_inner {
	display: none;
	padding: 0 0 0.5em 0;
	box-sizing: border-box;
}

最後にJavaScriptです。

まず、ページにjQueryを読み込みます。次に、JavaScriptファイルを作成して、下記コードを記入します。

$(function(){
  $('.acf_accordion .accordion_one .accordion_header').click(function(){
    $(this).next('.accordion_inner').slideToggle();
    $(this).toggleClass("open");
    $('.acf_accordion .accordion_one .accordion_header').not($(this)).next('.accordion_one .accordion_inner').slideUp();
    $('.acf_accordion .accordion_one .accordion_header').not($(this)).removeClass("open");
  });
});

ファイルをシングルページに読み込んでコード完成です。