Has anyone been able to add an image/images into a toggle? I need this functionality, but can not find a solution. Any help is much appreciated!
I think toggle cards support text (including links) at the moment, but not images.
Damn, that’s a real shame. I wonder if I should suggest it as a feature.
1 Like
+1 from me. This would be really nice feature.
Hi MattOnChain!
If you copy the code of the Toggle control and paste it into a HTML control, you could accomplish something like this by adding an <img src="..." />
tag within the kg-toggle-content
div.
For example:
<div class="kg-card kg-toggle-card" data-kg-toggle-state="close">
<div class="kg-toggle-heading">
<h4 class="kg-toggle-heading-text">
Would you like to see a photo?
</h4>
<button class="kg-toggle-card-icon">
<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path class="cls-1" d="M23.25,7.311,12.53,18.03a.749.749,0,0,1-1.06,0L.75,7.311"></path>
</svg>
</button>
</div>
<div class="kg-toggle-content">
<p><img src="https://images.unsplash.com/photo-1561336313-0bd5e0b27ec8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80" /></p>
<p>Photo by <a href="https://unsplash.com/@reneporter">René Porter</a>.</p>
</div>
</div>
You could then save this as a snippet to make it reusable.
This worked for me on the Casper theme.
2 Likes
Is this still not supported? it really sucks that we can’t add images to collapsible content.
I’ll try your suggestion @ryansechrest as a workaround
1 Like