アコーディオン（FAQ）
| 追加可能パーツ | 変更可能箇所 | 同一ページ に複数設置 |
ページ複製・ クリップボード使用可否 |
|---|---|---|---|
|
△ |
JS変更箇所
|
〇 | 〇 |
| ※留意事項 | |||
|
▼リッチテキストの機能で追加可能なもの
※：リッチテキストパーツの機能を使って画像の挿入等をすることは可能。
|
|||
デモ
どのようにして設立された協会なのでしょうか？
リッチテキストを入力してください（アコーディオンデモ）
どのようにして設立された協会なのでしょうか？
リッチテキストを入力してください（アコーディオンデモ）
どのようにして設立された協会なのでしょうか？
リッチテキストを入力してください（アコーディオンデモ）
リッチテキストの画像挿入機能を使用しています↓
どのようにして設立された協会なのでしょうか？
リッチテキストを入力してください（アコーディオンデモ）
- リッチテキストのリスト機能です
- ダミーテキスト
- ダミーテキスト
リッチテキストのテーブル機能です | ダミーテキスト |
ダミーテキスト | ダミーテキスト |
ダミーテキスト | ダミーテキスト |
1
どのようにして設立された協会なのでしょうか？
リッチテキストを入力してください（アコーディオンデモ）
構造図
デモのパーツの構造を説明しています。
設定方法
- CSSをカスタムCSSに記述。
-
編集画面用CSSを適切な位置に記述。
- JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
- クラス名を見本とあわせる。
- 新規行（row）を作成し、中のカラム（col）にスタイル調整用のクラス名「faq_col」を追加。
- 上記行の中にリッチテキストパーツを挿入し、クラス名「js-faq_qu faq_qu」の２つを追加。
※Qの内容[トリガー部分] - その下に更にリッチテキストパーツを挿入し、クラス名「js-faq_an faq_an」の２つを追加。
※Aの内容[開閉する部分] - プラス[＋]アイコンなどの挙動は、各自カスタムCSSで調整してください。
- 新CMSの場合：複合パーツ[Q&A]は従来のものと構造が異なるため、使用できません。デフォルトパーツを使用し、上記フローに沿って構築するようにしてください。
JS・CSS
- JS
- CSS
2024-09-06更新（v1.0.0）
<script>
'use strict';
/* -----------------------
アコーディオン（FAQ）v1.0.0
----------------------- */
/*------------- 変数定義 【変更可能】 START -------------*/
const faqDuration = 300;/* アコーディオンが表示されるまでの時間 [ms] */
/*------------- 変数定義 【変更可能】 END -------------*/
/* アコーディオンでスライドさせたい要素を取得 (クラス名を指定) */
const faqSlideToggleElements = document.querySelectorAll('.js-faq_an');
/* スライドを起動するトリガーのボタンを取得 (クラス名を指定) */
const faqSlideToggleBtns = document.querySelectorAll('.js-faq_qu');
faqSlideToggleElements.forEach((an) => {
an.style.display = 'none';
});
/* slideToggle */
faqSlideToggleBtns.forEach((faqSlideToggleBtn) => {
faqSlideToggleBtn.addEventListener('click', () => {
const el = faqSlideToggleBtn.nextElementSibling;
faqSlideToggle(el, faqDuration);
});
});
/* slideUp */
const faqSlideUp = (el, faqDuration) => {
el.previousElementSibling.classList.remove('is-active');
el.style.height = el.offsetHeight + 'px';
el.offsetHeight;
el.style.transitionProperty = 'height, margin, padding';
el.style.transitionDuration = faqDuration + 'ms';
el.style.transitionTimingFunction = 'ease';
el.style.overflow = 'hidden';
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
el.style.marginTop = 0;
el.style.marginBottom = 0;
setTimeout(() => {
el.style.display = 'none';
el.style.removeProperty('height');
el.style.removeProperty('padding-top');
el.style.removeProperty('padding-bottom');
el.style.removeProperty('margin-top');
el.style.removeProperty('margin-bottom');
el.style.removeProperty('overflow');
el.style.removeProperty('transition-duration');
el.style.removeProperty('transition-property');
el.style.removeProperty('transition-timing-function');
}, faqDuration);
};
/* slideDown */
const faqSlideDown = (el, faqDuration) => {
el.previousElementSibling.classList.add('is-active');
el.style.removeProperty('display');
let display = window.getComputedStyle(el).display;
if (display === 'none') {
display = 'block';
}
el.style.display = display;
let height = el.offsetHeight;
el.style.overflow = 'hidden';
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
el.style.marginTop = 0;
el.style.marginBottom = 0;
el.offsetHeight;
el.style.transitionProperty = 'height, margin, padding';
el.style.transitionDuration = faqDuration + 'ms';
el.style.transitionTimingFunction = 'ease';
el.style.height = height + 'px';
el.style.removeProperty('padding-top');
el.style.removeProperty('padding-bottom');
el.style.removeProperty('margin-top');
el.style.removeProperty('margin-bottom');
setTimeout(() => {
el.style.removeProperty('height');
el.style.removeProperty('overflow');
el.style.removeProperty('transition-duration');
el.style.removeProperty('transition-property');
el.style.removeProperty('transition-timing-function');
}, faqDuration);
};
/* slideToggle */
const faqSlideToggle = (el, faqDuration) => {
if (window.getComputedStyle(el).display === 'none') {
return faqSlideDown(el, faqDuration);
} else {
return faqSlideUp(el, faqDuration);
}
};
/* -----------------------
アコーディオン（FAQ） END
----------------------- */
</script>
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
2024-01-26更新（v1.0.0）
/*----- よくあるご質問 【JSアコーディオン】 START v1.0.0-----*/
.theme-fo-base .wrapper .contents {
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
.inner {
.row {
.col {
&.faq_col {
display: block;
background: #fff;
box-shadow: $box_shadow_common;
border-radius: $border_radius_common;
padding: 0;
.component {
//リッチテキスト
&.richtext {
&.faq_qu,
&.faq_an {
position: relative;
margin: 0 20px;
padding: 25px 50px;
&::before {
display: inline-block;
font-size: 28px;
font-weight: bold;
line-height: 1;
position: absolute;
left: 4px;
margin-top: -3px;
}
p {
margin: 0;
padding: 0;
}
}
&.faq_qu {
cursor: pointer;
&::before {
content: "Q.";
color: #ffad2f;
}
// [＋]アイコン
&::after {
content: "\f055";
font-family: $font_family_awsm6;
display: inline-block;
font-size: 28px;
font-weight: 900;
line-height: 1;
color: #ffad2f;
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
}
// [-]アイコン
&.is-active {
&::after {
content: "\f056";
}
}
}
&.faq_an {
border-top: 1px solid #ddd;
&:before {
content: "A.";
color: #333;
}
}
}
}
}
}
}
}
}
}
/*----- よくあるご質問 【JSアコーディオン】 END -----*/
© Basic Inc. All Rights Reserved.