<dl class="faq-02">
<dt class="faq-02__question js-faq-02-question">質問が入ります。</dt>
<dd class="faq-02__answer">
<div class="faq-02__answer-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
</dd>
<dt class="faq-02__question js-faq-02-question">質問が入ります。</dt>
<dd class="faq-02__answer">
<div class="faq-02__answer-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
</dd>
<dt class="faq-02__question js-faq-02-question">質問が入ります。</dt>
<dd class="faq-02__answer">
<div class="faq-02__answer-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
</dd>
</dl>
dl.faq-02
each faq in faqItems
dt.faq-02__question.js-faq-02-question #{ faq.question }
dd.faq-02__answer
.faq-02__answer-text #{ faq.answer }
{
"faqItems": [
{
"question": "質問が入ります。",
"answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
},
{
"question": "質問が入ります。",
"answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
},
{
"question": "質問が入ります。",
"answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
}
]
}
$BLOCK_NAME: '.faq-02';
// 変数
$color_primary: #01c584;
$color_border: #eee;
$color_answer_bg: rgba(238, 238, 238, 0.9);
$color_white: #fff;
$color_black: #000;
$duration_default: 0.2s;
#{ $BLOCK_NAME } {
letter-spacing: 1px;
&__question {
position: relative;
padding: 25px 25px 25px 100px;
font-weight: bold;
cursor: pointer;
border-bottom: 1px solid $color_border;
&::before,
&::after {
position: absolute;
top: 0;
bottom: 0;
display: block;
}
&::before {
left: 0;
width: 80px;
padding: 20px 0;
font-size: 20px;
color: $color_white;
text-align: center;
content: 'Q';
background: $color_black;
}
&::after {
right: 10px;
width: 10px;
height: 10px;
margin: auto;
content: '';
border-top: 1px solid #000;
border-right: 1px solid #000;
transition: transform $duration_default;
transform: rotate(135deg);
}
&.is-active::after {
transform: rotate(-45deg);
}
}
&__answer {
height: 0;
overflow: hidden;
}
&__answer-text {
position: relative;
padding: 25px 25px 25px 100px;
background: $color_answer_bg;
&::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
width: 80px;
padding: 10px 0;
font-size: 22px;
color: $color_primary;
text-align: center;
content: 'A';
}
&::after {
position: absolute;
top: 16px;
left: 20px;
display: block;
width: 60px;
height: 1px;
content: '';
background: $color_primary;
transform: rotate(-55deg);
transform-origin: top right;
}
}
}
import { gsap } from 'gsap';
export function faq02() {
const items = document.getElementsByClassName('js-faq-02-question');
[...items].forEach(item => {
const faq = new Faq02(<HTMLElement>item);
faq.init();
});
}
class Faq02 {
questionEl: HTMLElement;
answerEl: HTMLElement;
isOpen: Boolean;
speed: number;
constructor(questionEl: HTMLElement) {
this.questionEl = questionEl;
this.answerEl = <HTMLElement>this.questionEl.nextElementSibling;
this.isOpen = false;
this.speed = .5;
}
/**
* 初期化
*/
init() {
this.toggleHandler();
}
/**
* FAQを開閉する
*/
toggleAnswer() {
if (!this.isOpen) {
// 閉じている場合
const self = this;
this.questionEl.classList.add('is-active');
gsap.to(this.answerEl, {
duration: this.speed,
height: 'auto',
onComplete() {
self.isOpen = true;
}
});
} else {
// 開いている場合
const self = this;
this.questionEl.classList.remove('is-active');
gsap.to(this.answerEl, {
duration: this.speed,
height: 0,
onComplete() {
self.isOpen = false;
}
});
}
}
/**
* 開閉イベントの設定
*/
toggleHandler() {
this.questionEl.addEventListener('click', () => {
this.toggleAnswer.call(this);
});
}
}