Posted on by admin

Collapse-O-Matic Image And Text Trigger

This is a test to see if both an image and text can be used as a trigger.

Shortcode:

[expand title="<img src='https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg'><br/>Trigger Text" trigclass="noarrow"]Hidden Target Content[/expand]

Hidden Target Content

Without Text

[expand title="<img src='https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg'>" trigclass="noarrow"]Hidden Target Content[/expand]

Hidden Target Content

Roll-Your-Own Method

With Text

<div class="collapseomatic noarrow" id="some_id_one" title="Hover over Trigger Text"><img src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg"/></br>Trigger Text</div>
<div id="target-some_id_one" class="collapseomatic_content ">Hidden Target Content</div>

Trigger Text
Hidden Target Content

Without Text

<img src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg" class="collapseomatic noarrow" id="some_id" title="Hover over Trigger Text">
<div id="target-some_id" class="collapseomatic_content ">Hidden Target Content</div>

Hidden Target Content

Roll-Your-Own Image Trigger with Swap Image

<img src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg" class="collapseomatic noarrow" id="some_other_id" title="Click to Expand">

<img src="https://spacedonkey.de/wp-content/uploads/2012/09/grillhead.jpg" class="collapseomatic noarrow" style="display:none" id="swap-some_other_id" title="Click to Collapse">

<div id="target-some_other_id" class="collapseomatic_content ">Hidden Target Content</div>

Hidden Target Content

4 Replies to “Collapse-O-Matic Image And Text Trigger”

  1. Hello!

    I’m trying to make this code work on my WordPress (Health Coach theme) but it doesn’t work. I have quite a limited knowledge of CSS but would appreciate any help.

    Basically, I would like there to be an image and a heading underneath (styled to heading style h4) and when I click on either, the description expands below. I though I would copy the above code provided and replace with my info but I cannot seem to get the image to show up now style the heading.

    Thanks!

  2. Support for our free plugin is offered at:
    https://wordpress.org/support/plugin/jquery-collapse-o-matic

    If you require personal support, Collapse-Pro-Matic comes with a very high level of support, including getting the issue resolved directly on your page, with a step-by-step explanation of what we did.

    If you open a thread at WordPress, please include a link to your site, so we can take a closer look at the issue.

Comments are closed.