[CSS] FAQ

CSSのみの動作サンプル。
css内部でcontentsがQ.と A.の箇所は、Font Awsomeとか使うといいんじゃないかと思います。
注意すべきところは、input タグ（チェックボックス）とlabelタグの連携部分と、チェックが入った際の処理かな。

サンプル
ソース
1. html
2. CSS

サンプル

質問テキスト

回答テキスト
回答テキスト
回答テキスト

質問テキスト

回答テキスト
回答テキスト
回答テキスト

ソース

html

<section class="faq">
    <article class="faq_thread">
        <input id="q1" type="checkbox">
        <label for="q1">質問テキスト</label>
        <p class="faq_answer">
            回答テキスト<br>
            回答テキスト<br>
            回答テキスト<br>
        </p>
    </article>

    <article class="faq_thread">
        <input id="q2" type="checkbox">
        <label for="q2">質問テキスト</label>
        <p class="faq_answer">
            回答テキスト<br>
            回答テキスト<br>
            回答テキスト<br>
        </p>
    </article>
</section>

CSS

$color-hover: #1119875d;

// Frequently Asked Question 
.faq {
    // 質問スレッド 装飾部を入れたいのでこの設定
    .faq_thread {
        position: relative;
    }
    // チェックボックスは非表示
    input {
        display: none;
    }

    // 質問
    label {
        padding: 1em;
        background-color: $color-theme;
        display: block;
        font-weight: bold;
        cursor :pointer;

        &::before {
            content: 'Q.';
            padding-right: .5em;
        }
        // 装飾部
        &::after {
            position: absolute;
            right: 1em;
            content: '>';
            transition: .1s;
            transform: rotate(90deg);
        }
    }
    // 回答
    .faq_answer {
        padding: 0 1em;
        height: 0;
        overflow-y: hidden;
        transition: .1s;
        opacity: 0;
        border: 1px solid $color-theme;

        &::before {
            content: 'A.';
            padding-right: .5em;
        }
    }
    // 表示
    input:checked + label + .faq_answer {
        margin-bottom: 1em;
        padding: 1em;
        height: auto;
        opacity: 1;
    }
    // 装飾部クルクル
    input:checked + label::after {
        transform: rotate(270deg);
    }
}