Season: Summer 2014
August 2014
October 2014

Posted on

Collapse-O-Matic Partially Highlighted Trigger Text

In this example we will try to make part of the trigger text bit special by highlighting it with a special color or class.

So the first step is to create our special class. Add the following to the plugin option page under custom css:
.whoopie{
color: red;
}

Next, we wrap the part of the trigger text we want highlighted in a span and assign the class. Be sure to use single quotes (‘) if the title element uses double quotes (“):
[expand title="This is <span class='whoopie'>really</span> special"]...[/expand]

The end results looks exactly like so:

This is really special
…and so are you.

This is what happens when you insert the CSS inline:

[expand title="Open: bold  green " swaptitle="Close"]Target Content[/expand]
[expand title="Open: bold" swaptitle="Close"]Target Content[/expand]
Open: bold green
Target Content
Open: bold
Target Content
Posted on

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
Posted on

Collapse-Pro-Matic Highlander Cookie Test

This test will use both highlander grouping and cookies. The end result should be that every time a visitor returns to the page, the existing expand/collapse state is recalled.

[expand title="Monkey" rel="animal-highlander" cookiename="monkey"]Target Content[/expand]
[expand title="Donkey" rel="animal-highlander" cookiename="donkey"]Target Content[/expand]
[expand title="Sasquatch" rel="animal-highlander" cookiename="sasquatch"]Target Content[/expand]

Monkey
Target Content

Donkey
Target Content

Sasquatch
Target Content

Posted on

Annual Archive Select Text Test

As version 1.4.1 we added a fancy new attribute called select_text and it works like this:

[archives type="monthly" limit="7" format="option" select_text="Choose Wisely"]

weekly: