アコーディオンの矢印画像を押しても開くようにしたい。

Question

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;
}

Answer 1

imgをlabelで囲んでみては？

<label for="check1"><img src="../assets/img/faq/faq_arrow.png" alt="arrow"></label>

Comments

[yambejp]

余談ですが、画像には必ずサイズとaltをつけましょう

[okeke]

早々にご回答いただきありがとうございました！
labelをつける解決方法があったとは、、ありがとうございました！
また、arrowの動きがなくなってしまったので対処しておりご返答の時間遅くなってしまいました。
申しわけございません。
色々とやってうまく表示されるようになりました。
>画像には必ずサイズとaltをつけましょう
仰る通りです！ご指摘ありがとうございます！

ベストアンサーとさせていただきます！
本当にありがとうございました！