ロード時にアコーディオンを閉じた状態にしたい

実現したいこと

FAQに入れているアコーディオンがロージ時から答えが見えているので、閉じた状態にしたいです。

html

<!DOCTYPE html>
<html lang="jp">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="destyle.css">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
</head>

<body>
    <section class="FAQ">
        <div class="qa">
            <div class="q">LINEスタンプを作る際に必要なものは何ですか？</div>
            <div class="a">作る材料としてお写真とコメントが必要です</div>
        </div>
        <div class="qa">
            <div class="q">自社キャラクターで作成できますか？</div>
            <div class="a">著作権に問題なければ制作できます。キャラクターのデータをお送りください。</div>
        </div>
        <div class="qa">
            <div class="q">キャラクター作成からお願いできますか？</div>
            <div class="a">可能です。別途料金となりますのでご相談ください。</div>
        </div>
        <div class="qa">
            <div class="q">どんなアイディアでもスタンプにできますか？</div>
            <div class="a">LINEが規定する審査ガイドラインに沿わない内容のスタンプのご注文は、
                弊社では受け付けることができません。
            </div>
        </div>

    </section>
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>

</html>

css

@charset "UTF-8";
/*---ヘッダー画像---*/
/*FAQ*/
.FAQ {
    max-width: 86%;
    margin: 0 auto;
}

.qa {
    font-size: 20px;
}

.q:after.active {
    display: none;
}

.a.load{
    display: none;
}


.qa .q {
    background-color: #743d3d;
    height: 60px;
    position: relative;
    cursor: pointer;
    /* left: 3px; */
    /* top: -17px; */
    font-weight: bold;
    gap: 1%;
    padding: 2%;
    display: flex;
    align-items: center;
    color: black;
}

.qa .q::before {
    content: "";
    position: relative;
    display: inline-block;
    top: 0px;
    left: 0px;
    width: 30px;
    height: 30px;
    background-image: url(img/Q&A/qa-Q.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.a {
    background-color: greenyellow;
    height: auto;
    position: relative;
    cursor: pointer;
    /* left: 3px; */
    /* top: -17px; */
    font-weight: bold;
    gap: 1%;
    padding: 2%;
    align-items: center;
    color: black;
    line-height: 2rem;
}


.qa .a::before {
    content: "";
    position: relative;
    display: inline-block;
    top: 7px;
    left: 0px;
    width: 30px;
    height: 30px;
    background-image: url(img/Q&A/qa-A.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

javascript

$('.q').click(function() {
    $(this).siblings('.a').stop().slideToggle();
    $('.q').not($(this)).siblings('.a').slideUp();
    $(this).toggleClass('active');
    $('.q').not($(this)).removeClass('active');
});

試したこと

・.qa .qのdisplay:flexをblockかnoneにすれば解決するんですが、疑似要素で入れたアイコン画像と隣のテキストをalign-items:center;を使い縦をきれいに並べたいです。
・ロード時にクラス付与して閉じるように指示すればいいと思い。javascriptでonload時にclassList.adを使いクラス付与を入れたんですが、うまくいきませんでした。

行動規範の内容に同意します

回答1件

普通に.aをhideするだけです

javascript
1$(function(){
2  $('.a').hide();
3  $('.q').on('click',function() {
4    $('.q').not($(this)).removeClass('active').next('.a').slideUp();
5    $(this).toggleClass('active').next('.a').slideToggle();
6  });
7});