Q&A
実現したいこと
アコーディオンの初期状態を閉じた状態にしたいです。
前提
アコーディオンは実装できている状態です。
HTML
<ul class="qa-list-group"> <!--質問1--> <li> <div class="q-group"> <h2 class="q-bag">Q.</h2> <p class="q-text">●●●●●?</p> <div class="icon-wrap"><span class="icon"></span></div> </div> <div class="a-group"> <h2 class="a-bag">A.</h2> <p class="a-text">○○○○。</p> </div> </li> </ul>
CSS
.qa-list-group { width: 100%; height: auto; display: flex; flex-direction: column; } .qa-list-group > li { padding-bottom: 6px; list-style: none; } .q-group{ cursor: pointer; text-align: center; position: relative; display: flex; flex-direction: row; width: 90%; border-bottom: 0.1rem solid #0097a7; } .q-bag{ font-size: 1.5rem; color: #0097a7; font-family: 'Noto Serif JP', serif; } .q-text{ width: 80%; font-size: 1rem; color: #0097a7; text-align: start; } .a-group{ width: 90%; display: flex; flex-direction: row; } .a-bag{ font-size: 1.5rem; font-family: 'Noto Serif JP', serif; } .a-text{ width: 80%; font-size: 1rem; text-align: start; } .icon-wrap { position: absolute; right: 5px; top: 50%; transform: translatey(-50%); width: 2rem; height: 2rem; background: #0097a7; } .icon { position: relative; display: inline-block; width: 100%; height: 100%; }
jQuery
//アコーディオン $(function () { $('.q-group').click(function () { $(this).next('div').slideToggle(); $(this).find(".icon").toggleClass('open'); }); });
試したこと
a-groupにdisplay:none;を追加すると非表示にはなるのですが、
display:flex;が無効になってしまいます。
.a-group{ width: 90%; display: flex; flex-direction: row; display: none; /* 初期状態は非表示 */ }
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/04/02 06:32