html/cssを使用したアコーディオンを組んでいますが、
html10行目の画像(faq_arrow.png)をクリックした時にアコーディオンが開かない状態です。
結論、faq_arrow.pngをクリックしてもアコーディオンが開く状態にしたいです。(画像の180度回転はそのまま)
「faq_arrow.pngをクリックしたら、id="check1"のcheckboxをクリックしたよ。」
と言うJquery?Javascript?を使用すれば早いのかもしれませんが知識がなくここに投稿させていただきました。
Jquery/Javascriptもしくはcssで対応可能ならその方法をご教示お願いします
宜しくお願い致します。
他、何か不足ございましたらご指摘お願い致します
<div class="sb-accordion__container"> <input class="sb-accordion__input" type="checkbox" id="check1"> <label class="sb-accordion__title" for="check1"> <span class="col-xs-0-1"><span class="q">Q</span></span> <span class="col-xs-5-5">サンプルテキスト</label> <div class="sb-accordion__content"> <span class="col-xs-0-1"><span class="q">A</span></span> <span class="col-xs-5-5">サンプルテキスト</span> </div> <i class="sb-accordion__icon material-icons"><img src="../assets/img/faq/faq_arrow.png"></i> </div>
.sb-accordion { width: 100%; padding: 0; margin: 0 0 80px 0; } .sb-accordion__container { border-bottom: 1px solid #f2f2f2; position: relative; } .sb-accordion__container:last-child { border-bottom: 1px solid #f2f2f2;} .sb-accordion__icon { position: absolute; right: 20px; top: 20px; transition: 0.3s all; } .sb-accordion__title { width: 100%; box-sizing: border-box; padding: 20px 60px 10px 0; display: inline-block; transition: 0.3s all; margin: 0; font-weight: 500; } .sb-accordion__title .col-xs-0-1{ padding: 0 10px; width: 3.5%; } .sb-accordion__content .col-xs-0-1{ width: 4%; } .sb-accordion__content .col-xs-0-1{ width: 11%; } } .sb-accordion__content { padding: 0 20px; box-sizing: border-box; width: 100%; transition: 0.3s all; opacity: 0; max-height: 0; overflow: hidden; } .sb-accordion__content a { text-decoration: underline; } .sb-accordion__input { display: none; } .sb-accordion__input:checked + .sb-accordion__title { background: #f2f2f2; padding: 20px 60px 20px 0; } .sb-accordion__input:checked + .sb-accordion__title + .sb-accordion__content { max-height: 200px; padding: 20px; opacity: 1; overflow: auto; } .sb-accordion__input:checked + .sb-accordion__title + .sb-accordion__content + .sb-accordion__icon { transform: rotate(180deg); } .sb-accordion span.q{ font-size: 16px; }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/23 09:29
2019/05/23 10:31