質問:

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ラボに入れば更に多くの質問と回答のログが見れます!

関連した質問

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

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

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通