よくある質問のアコーディオンを作成！HTML・CSS・JSソースコードあり！jQueryを使用しないパターンも紹介！

2023年11月3日
コラム
HTML/CSS, JavaScript

コラム

1 はじめに
2 よくある質問のアコーディオン動き
3 よくある質問のアコーディオンソースコード
- 3.1 jQueryの場合
- 3.2 jQueryを使用しない場合
4 まとめ
5 他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ

はじめに

実務経験で作成した「よくある質問のアコーディオンメニュー」を今回はご紹介します。

よくある質問のアコーディオン動き

実際にクリックもしくはタップして動きを確認してみてください。

質問テキスト質問テキスト質問テキスト質問テキスト？

よくある質問のアコーディオンソースコード

<div class="faq__list">
	<div class="faq__item">
		<div class="faq-q">
			<div class="faq__mark">Q1</div>
			<div class="faq-q__txt">質問テキスト質問テキスト質問テキスト質問テキスト？</div>
			<div class="faq_toggle">
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="faq-a" style="display: none;">
			<div class="faq__mark">A1</div>
			<div class="faq-a__content">
				<p>回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト</p>
			</div>
		</div>
	</div>
	<div class="faq__item">
		<div class="faq-q">
			<div class="faq__mark">Q2</div>
			<div class="faq-q__txt">質問テキスト質問テキスト質問テキスト質問テキスト？</div>
			<div class="faq_toggle">
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="faq-a" style="display: none;">
			<div class="faq__mark">A2</div>
			<div class="faq-a__content">
				<p>回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト</p>
			</div>
		</div>
	</div>
	<div class="faq__item">
		<div class="faq-q">
			<div class="faq__mark">Q3</div>
			<div class="faq-q__txt">質問テキスト質問テキスト質問テキスト質問テキスト？</div>
			<div class="faq_toggle">
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="faq-a" style="display: none;">
			<div class="faq__mark">A3</div>
			<div class="faq-a__content">
				<p>回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト</p>
			</div>
		</div>
	</div>
</div>

.faq__list {
    background-color: #f7f7f7;
    padding: 50px 20px;
}
.faq-q, .faq-a {
    position: relative;
}
.faq-q {
    background-color: #fff;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
}
.faq-q .faq__mark {
    color: #094;
}
.faq__mark, .faq_toggle {
    position: absolute;
}
.faq__mark {
    font-weight: 700;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
}
.faq-q__txt {
    font-weight: 700;
}
.faq_toggle {
    width: 50px;
    height: 50px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.faq_toggle span {
    display: inline-block;
    position: absolute;
    transition: all 0.3s;
    background-color: #094;
}
.faq_toggle span:nth-of-type(1) {
    width: 30px;
    height: 4px;
    top: 23px;
    left: 10px;
}
.faq_toggle span:nth-of-type(2) {
    width: 4px;
    height: 30px;
    top: 10px;
    left: 23.5px;
}
.open .faq_toggle span:nth-of-type(1) {
    opacity: 0;
}
.open .faq_toggle span {
    transform: rotate(90deg);
}
.faq-a {
    background-color: #fef5e8;
    border-top: 2px solid #094;
    border-radius: 0 0 8px 8px;
}
.faq-a .faq__mark {
    color: #be0009;
}
.faq__list p {
    line-height: 1.2;
}
@media screen and (min-width: 768px) {
    .faq__item:nth-of-type(n+2) {
        margin-top: 30px;
    }
    .faq-q, .faq-a {
        padding-top: 20px;
        padding-left: 130px;
    }
    .faq-q {
        padding-bottom: 20px;
    }
    .faq__mark {
        font-size: 26px;
        left: 45px;
    }
    .faq-q__txt {
        font-size: 20px;
    }
    .faq_toggle {
        right: 20px;
    }
    .faq-a {
        padding-right: 90px;
        padding-bottom: 35px;
    }
}
@media screen and (max-width: 767px) {
    .faq__item:nth-of-type(n+2) {
        margin-top: 35px;
    }
    .faq__mark {
        font-size: 24px;
        left: 20px;
    }
    .faq-q__txt {
        font-size: 16px;
        padding: 20px 50px 20px 70px;
        line-height: 1.4;
    }
    .faq_toggle {
        right: 0;
    }
    .faq-a__content {
        padding: 20px 0 24px;
    }
    .faq-a p {
        font-size: 16px;
        padding: 0 14px 0 70px;
    }
}

jQueryの場合

jQueryの場合はすごく簡単にできます。

WordPressでも対応できるように「$」の部分を「jQuery」に変更しています。

jQuery(".faq-q").on('click', function() {
    jQuery(this).toggleClass("open");
    jQuery(this).next('.faq-a').slideToggle();
});

jQueryを使用しない場合

ページスピード対策などでjQueryを使用されない方は、下記JavaScriptをご利用ください。JavaScriptだと記述が長くなりますね。jQueryだと少ない記述でできるので便利ですね。

function fadeIn(el) {
    el.style.opacity = 0;
    el.style.display = "block";
    let tick = function() {
        el.style.opacity = +el.style.opacity + 0.05;
        if (+el.style.opacity < 1) {
            (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 500);
        }
    };
    tick();
}

function fadeOut(el) {
    el.style.opacity = 1;
    let tick = function() {
        el.style.opacity = +el.style.opacity - 0.05;
        if (+el.style.opacity > 0) {
            (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 500);
        } else {
            el.style.display = "none";
        }
    };
    tick();
}

const faqQElements = document.querySelectorAll(".faq-q");

faqQElements.forEach(function(element) {
    element.addEventListener('click', function() {
        element.classList.toggle("open");
        const faqA = element.nextElementSibling;

        if (faqA.style.display === "none" || faqA.style.display === "") {
            fadeIn(faqA);
        } else {
            fadeOut(faqA);
        }
    });
});

まとめ

いろんなサイトに関わってきましたが、よくある質問セクションはよく見るので毎回1からコーディングをするのは時間がもったいないです。

よくあるレイアウトはまた活用できるようにソースコードを控えておくと良いです。自分自身はブログ記事などでソースコードを公開しています。

コーディングの品質を上げるのはもちろんですが、コーディングの効率もアップさせていきましょう。

他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ

ソースコードまとめ

HTML・CSS ・JavaScriptソースコード紹介記事まとめ

実務経験で作成したレイアウトのHTML・CSS ・JavaScriptソースコードを紹介した記事まとめています。

前の記事

swiperスライダー（自動再生・PC4枚・スマホ1枚両端見切れ）ソースコードあり！
次の記事

HTML・CSS ・JavaScriptソースコード紹介記事まとめ