Elementorの新しい
無料テンプレートサイトが追加されました！

質問:

Elementorウィジェットのアコーディオンのタイトルに画像をいれたいのですが実装可能ですか？

Elementorにアコーディオンがウィジェットでありますが、タイトル部分に画像をいれて、画像をクリックすると本文を開閉させてコンテンツを表示させたいです。

このような動作をさせる場合、アコーディオンではなく別のウィジェットを使った方がいいでしょうか。

おすすめのウィジェットがあれば教えていただけると助かります。

回答:

自己解決しました。

他のウィジェットではちょうどいい解決方法が見つからなかったので

ElementorのHTMLウィジェットを使って下記のコードをカスタマイズして実装しました。

HTMLウィジェットに記入

<details>

<summary>

ここを押すとアコーディオンが開きます

<img src="ここに画像のURL">

</summary>

<div class="answer">

<p>ここに内容を書きます</p>

</div>

</details>

cssを追加

summary{
position: relative;
max-width: 600px;
padding: 10px 50px 10px 20px;
cursor: pointer;
background-color: #353535;
color: #fff;
margin: 10px auto;
}
summary::-webkit-details-marker{
position: absolute;
color: transparent;
}
summary:hover, details[open] summary {
background-color: #804747;
margin-bottom: 0px;
}
summary::after {
content: '+';
font-size: 130%;
position: absolute;
top: 45%;
right: 30px;
transform: translateY(-50%);
transition: transform.5s;
}
details[open] summary::after{
transform:translateY(-50%) rotate(45deg);
}
.answer {
padding: 20px 20px;
background-color: #e6e6e6;
max-width: 630px;
margin: auto;
}
.answer p {
background: none;
}
details[open] .answer{
animation:fadein .5s ease-in-out;
}
@keyframes fadein {
0% { opacity: 0; }
100%{ opacity: 1; }
}

TOFUラボに入れば更に多くの質問と回答のログが見れます!