SWELL　Q＆Aアコーディオン

Wordpressカスタマイズ

SWELL FAQブロックをカスタマイズ｜アコーディオン（開閉式）にする【有料級】 | Wordpressカスタマイズ SWELLのFAQブロックは、JSON-LDの構造化データを出力できるので利用しているSWELLユーザーは多いと思います。

SWELLのFAQブロックを開閉式にするカスタマイズ

SWELLのFAQブロックを開閉式にカスタマイズするのはそれほど大変ではありません。

少しのCSSとJavascriptで対応でき、テーマのHTMLの変更は不要です。

javascriptを追加する

FAQのQをクリックされたら、Aにclassfaq-openを追加する処理をjavascriptで書けばいいです。

add_action('wp_footer',function(){
?>
<script>
	document.addEventListener("DOMContentLoaded", function() {
		document.querySelectorAll('.swell-block-faq__item .faq_q').forEach(function(element) {
			element.addEventListener("click", function() {
				var answer = this.nextElementSibling;
				this.classList.toggle('faq-open');
			});
		});
	});

</script>

<?php
});

CSSを追加する

CSSで、faq-openの有無で動きを変えてあげれば、開閉式のFAQが完成します。

.swell-block-faq__item .faq_q{
	cursor: pointer;
	padding-right:1rem;
}
.swell-block-faq__item .faq_q::after {
    position: absolute;
    top: 50%;
    right: .25rem;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    content: '';
    -webkit-transform: translate(0px,-2px) rotate(135deg);
    transform: translate(0px,-2px) rotate(135deg);
    border-top: 2px solid #000;
    border-right: 2px solid #000;
		transition:.5s;
}
.faq_q.faq-open::after {
	transition:.5s;
    -webkit-transform: translate(0px,2px) rotate(-45deg);
    transform: translate(0px,2px) rotate(-45deg);
}
.faq_a{
		transition:.5s;
}
.faq_q:not(.faq-open)+.faq_a{
    padding-top: 0;
    padding-bottom: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
	transition:.5s;
}