よくある質問のテンプレートの紹介

通常のよくある質問

特に動きもないよくある質問

クエスチョンの内容が入ります。
回答が入ります。

.faq dt {
    padding: 10px;
    position: relative;
    display:flex;
    align-items: center;
}
.faq dt:before {
    content: 'Q';
    font-size: 30px;
    margin:0px 20px 0px 0px;
}

.faq dd {
    padding: 10px;
    position: relative;
    margin:0px 0px 0px 0px;
    display:flex;
    align-items: center;
}
.faq dd:before {
    content: 'A';
    font-size: 30px;
    margin:0px 20px 0px 0px;
}

表示サンプル

動きのよくある質問

Qをクリックした際の動きを付けてみます。

「jquery.js」をダウンロード致します。
ダウンロード先

今回はCDNで読み込みます。

クエスチョンの内容が入ります。
アンサー回答が入ります。

.faq dt {
    padding: 10px;
    position: relative;
    display:flex;
    align-items: center;
}
.faq dt:before {
    content: 'Q';
    font-size: 30px;
    margin:0px 20px 0px 0px;
}

.faq dd {
    padding: 10px;
    position: relative;
    margin:0px 0px 0px 0px;
    display:flex;
    align-items: center;
    display:none;/*最初は非表示*/
}
.faq dd:before {
    content: 'A';
    font-size: 30px;
    margin:0px 20px 0px 0px;
}

表示サンプル

アイコンのよくある質問

Qをクリックした際にアイコン表示を変更します。。

「jquery.js」をダウンロード致します。
ダウンロード先

今回はCDNで読み込みます。

クエスチョンの内容が入ります。
アンサー回答が入ります。

.faq dt {
    padding: 10px;
    position: relative;
    display:flex;
    align-items: center;
}
.faq dt:before {
    content: 'Q';
    font-size: 30px;
    margin:0px 20px 0px 0px;
}

.faq dd {
    padding: 10px;
    position: relative;
    margin:0px 0px 0px 0px;
    display:flex;
    align-items: center;
    display:none;/*最初は非表示*/
}
.faq dd:before {
    content: 'A';
    font-size: 30px;
    margin:0px 20px 0px 0px;
}
.faq_icon:before{
  content:"▼";/*自由に変えて下さい*/
  margin:0px 0px 0px 10px;
}
.active .faq_icon:before{
  content:"▲";/*自由に変えて下さい*/
  margin:0px 0px 0px 10px;
}

表示サンプル