you’ll need to separate the triggers and targets using the roll-your-own method.
This exact issue was answered a few times here in the forums, but that was some years ago. Maybe this will help:
https://spacedonkey.de/623/collapse-o-matic-line-of-trigger-images/
Thread Starter
EMar
(@sounds)
Thanks, this roll-you-own example works if I remove float in the css snippet.
/* Collapse-o-matic */
.birdwire {
display: inline;
float: ;
margin-right: 0.3em;
width: 260px;
}
Is there an example of setting a different image for expand & collapse?
My sidebar widget:
<img id="nj2" src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles-150x150.jpg" alt="2" width="30" height="30" class="collapseomatic noarrow" rel="ninjtee-highlander"/>
</div>
<div style="clear: both;"> </div>
<div id="target-nj1" class="collapseomatic_content">You can use <a href="https://getemoji.com/" target="_blank">emoji icons</a> in live chat.<br>No ads, adult content, links or spam.<br><br>[sac_happens]
</div>
<div id="target-nj2" class="collapseomatic_content"><font size="2">Donate with PayPal or Crypto</font><br><br>
[give_form id="17697"]<br>
<font size="3">Donate with Crypto</font><font size="1"> (BTC, ETH, USDT & BAT)</font></div>
Like so:
<img src="url_image_1" class="collapseomatic noarrow" id="some_id" title="Click to Expand">
<img src="url_image_2" class="collapseomatic noarrow" style="display:none" id="swap-some_id" title="Click to Collapse">
<div id="target-some_id" class="collapseomatic_content ">Hidden Target Content</div>
Demo: https://spacedonkey.de/1317/collapse-o-matic-image-and-text-trigger/
