Collapse Commander Test

This is a collapse commander element with no added metadata. Only Title and Content:

Trigger Text and Target Content Only
Hidden Target Content

This is an example with NO trigger text assigned:

this is the content of my special trigger, sadly there is no trigger text for you to read.

This is an example with sub items…

Master Blaster

Collapse-O-Matic Expand Title with HTML Formatting

Here is a test with and expand and subexpand elements with html formatting in the Title Attribute:

[expand title="I am <b>bold</b>"]...[/expand]

I am bold
I am also bold
hey strong dude
I am italics
hey Italian dude
I am deleted
phone is ringing

However, this is not supported across all WordPress versions. Collapse-O-Matic version 1.3.6 offers some new placeholders to use as a work-around for WordPress installations that will not allow html in the title, swaptitle, startwrap, endwrap, excerpt and swapexcerpt attributes:
%(% = <
%)% = >
%{% = [
%}% = ]

[expand title="I am %(%b%)%bold%(%/b%)%"]...[/expand]

I am bold
Hidden Content

Collapse Commander

One benefit of using Collapse Commander is that all attributes are not processed through the shortcode attribute filters. This means that both HTML and Shortcodes are fully supported, without the need to further clutter the expand shortcode attributes with placeholders.

No need for placeholders with Collapse Commander
No need for placeholders with Collapse Commander

Collapse-O-Matic Excerpt Shortcode Test

This is a standard collapse element with an plain text excerpt:
[expand title="trigger text" excerpt="excerpt text"]target content[/expand]

I am a little tea-pot
short and stout
Here is my handle, here is my spout.
p.s. the word little is wrapped in em tags:
I am a <em>little</em> tea-pot

Nesting Shortcodes In Shortcode Attributres

Now, what if we wanted to have the excerpt contain a shortcode…
well, no, The shortcode parser does not accept square brackets within attributes. But, what if we used placeholders?!

Placeholders

As of Collapse-O-Matic v1.6.3d placeholders have been added as a work-around that allows both HTML and shortcodes to be used within the title, swaptitle, startwrap, endwrap, excerpt and swapexcerpt attributes:
%(% = <
%)% = >
%{% = [
%}% = ]

So the simple syntax would look like this:
[expand title="trigger text" excerpt="%{%some_shortcode attribute='value'%}%"]target content[/expand]

Keep in mind that if double quotes are used to wrap the attribute, then single quotes must be used inside the nested shortcode’s attributes. Or, as the example below shows, single quotes used to wrap the attribute value, and double quotes inside the nested shortcode’s attributes.

So, a real world example would look like this:
[expand title='I am a little donkey' excerpt='%{%caption id="attachment_1493" align="alignnone" width="150"%}%<a href="https://spacedonkey.de/wp-content/uploads/2014/11/donkey5n-3.jpg"><img src="https://spacedonkey.de/wp-content/uploads/2014/11/donkey5n-3-150x150.jpg" alt="short and stout" width="150" height="150" class="size-thumbnail wp-image-1493" /></a> short and stout%{%/caption%}%']stuck in a manhole until someone pulled me out.[/expand]

I am a little donkey
short and stout
short and stout
stuck in a manhole until someone pulled me out.

HTML in Attributes

On some versions of WordPress the use of HTML in shortcode attributes is limited or not at all supported. In these cases you can use placeholders as a work-around, like so:

[expand title="Trigger Text %(%strong%)%Bold%(%/strong%)%"]Hidden Content[/expand]

Trigger Text Bold
Hidden Content

Yes it’s a bit messy but it does work. Let’s see if Collapse Commander can help clean up this clutter.

Collapse Commander

And finally here is a test using the Collapse Commander add-on plugin:
[expand cid="1537"/]

I’m a little donkey
short and stout
short and stout
Stuck in a manhole cover until someone pulled me out.

Oh, very cool! As an added bonus, there is no need to use placeholders. Collapse Commander accepts the full shortcodes in the excerpt fields, as shown in the following screenshot. Check it out:

No need for placeholders with Collapse Commander
No need for placeholders with Collapse Commander

Collapse-O-Matic Nested UL

Here is an example of how to add ‘extra’ sub li’s to a list element using the jedi powers of collapse-o-matic:

The basic idea is this:

<ul>
<li>your thing with a link
<ul>
<li>this is the super cool extra info</li>
</ul>
</li>
<li>some other thing</li>
</ul>

So now we just need to add the roll-your-own collapse-o-matic elements:

<ul>
<li>your thing with a <span class="collapseomatic" id="linkone">link</span><ul><li id="target-linkone" class="collapseomatic_content">this is the super cool extra info</li></ul></li>
<li>some other thing</li>
</ul>

and BLAMO!

  • your thing with a link
    • this is the super cool extra info
  • some other thing

Collapse-O-Matic Button Test

There are a couple of ways a button can be used as a collapse-o-matic trigger:

using a stylized div

Push me
this is the hidden content

shortcode:

[expand title="Push me" trigclass="noarrow my_button" targclass="my_content" tag="div"]this is the hidden content[/expand]

css:

.my_button {
background: #4B55E3;
color:  white;
padding:  5px;
width: 130px;
text-align: center;
}

.my_button.colomat-hover{
 background: #999;
text-decoration: none;
}

.my_content{
margin-left: 0;
}

Using a html button:

shortcode:

[expand title="Push me" trigclass="noarrow my_button" targclass="my_content" tag="button"]this is the hidden content[/expand]
this is the hidden content