Image instead text for trigger

Yes, this can be done in a number of ways, but the preferred way would be to use the ‘roll-your-own method as follows:

<img src="https://mydomain.com/images/falcon_girl.jpg" class="collapseomatic noarrow" id="some_id" title="Hover over Trigger Text">
<div id="target-some_id" class="collapseomatic_content ">Target Content</div>

keep in mind, if you are using the roll-your-own method, you will need to make sure the ‘load script only with shortcode’ is unchecked in the plugin settings, unless you have other shortcode expands on the same page.

Pro Tip: If you are using expand elements, with or without images, in your site, Collapse Commander is a good way to manage multiple collapse elements. Here is an example of how it works with images:
https://spacedonkey.de/2362/collapse-commander-image-test/

Let us know if that works for you, or if you require any further assistance.

Awesome thank you so much for that.

So I am close. I think I am duplicating somethiing somewhere….

[expand title=”Click here”] [contact-form-7 id=”844″ title=”Investor Contact”] [/expand] <img src=”https://www.evisalaunch.com/wp-content/uploads/2016/05/13855354235_887ae071c0_b-e1463151579298.jpg&#8221; class=”collapseomatic noarrow” id=”some_id” title=”Click here”> <div id=”target-some_id” class=”collapseomatic_content “>[expand title=”Click here”] [contact-form-7 id=”844″ title=”Investor Contact”] [/expand]</div>

It looks like this now: https://www.evisalaunch.com/project/sydnees-pet-grooming-franchise/

I just really want the mail icon and then click it and the contact form 7 shows.

COmmander sounds great actually. If I can get this working I think we will get it. Because being able to manage multiple expanders is idea.

try this:

[expand title="<img src='https://www.evisalaunch.com/wp-content/uploads/2016/05/13855354235_887ae071c0_b-e1463151579298.jpg'/>"] [contact-form-7 id="844" title="Investor Contact"] [/expand]

That worked! Thank you!
M

Great! If you are happy with the plugin, or it’s support, please consider leaving a little review!

Issue marked as resolved.

Hello I dont know if this issue can be re-opened but I’m having similar trouble except its still not excepting the different inputs.

The website is just echoing out
instead of using the image at the address. The content inside the [expand] is working properly though.
Additonally i thought maybe it was the double quotes surround the title but when removed the page now echos out <img

• This reply was modified 7 years, 7 months ago by mcrow.
• This reply was modified 7 years, 7 months ago by mcrow.

can you include a link to your page?
Also, make sure you are working in Text, not visual mode.

https://site.bgelectrical.com/?page_id=288
I wrote it in the text classic mode
& thank you for responding

• This reply was modified 7 years, 7 months ago by mcrow.

Strange! Fear not, we’ll get you sorted.
Can you copy-paste your shortcode here?

Be sure to wrap it using the code button, so it will be formatted correctly:

This is an <img src="example">

dammit! i forgot the code button! got it sorted out now! thank you.

Huzzah! We’ll mark this thread as resolved.
if you still need help, just hit us back.
All the best.

Hi I’ve been working on a similar problem for a couple of days, I’m using Collapse o’Matic in a couple of cells in a table and I wanted different show/hide images for each cell in the row like so:

These are the [expand] shortcodes:

[expand title="<img src='https://localhost:8080/florapal/wp-content/uploads/2017/05/leaf-up.png' width='32'/>" swaptitle="<img src='https://localhost:8080/florapal/wp-content/uploads/2017/05/leaf-down.png' width='32'/>"]

[expand title="<img src='https://localhost:8080/florapal/wp-content/uploads/2017/05/book-closed.png' width='48'/>" swaptitle="<img src='https://localhost:8080/florapal/wp-content/uploads/2017/05/book1.png' width='48' />"]

After inserting the shortcodes I was still left with 2 images – the default up/down arrows and my new images, I cancelled the up/down arrows with the following css:

.collapseomatic {
    background-image: url(https://localhost:8080/florapal/wp-content/uploads/2017/05/blank-transp.png) !important;
  padding: 0 0 12px 24px;
}
.colomat-close {
    background-image: url(https://localhost:8080/florapal/wp-content/uploads/2017/05/blank-transp.png) !important;
  padding: 0 0 12px 24px;
}

where blank-trans.png is a transparent 57px by 57px square.

Hope this helps someone

David

• This reply was modified 7 years, 6 months ago by blogdropper.

had problem with image url in above post, ok now

• This reply was modified 7 years, 6 months ago by blogdropper. Reason: unable to link to image
• This reply was modified 7 years, 6 months ago by blogdropper.

issue still marked as resolved