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
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
<figure id="attachment_1493" aria-describedby="caption-attachment-1493" style="width: 150px" class="wp-caption alignnone"><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><figcaption id="caption-attachment-1493" class="wp-caption-text">short and stout</figcaption></figure>

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

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
<figure id="attachment_1493" aria-describedby="caption-attachment-1493" style="width: 150px" class="wp-caption alignnone"><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><figcaption id="caption-attachment-1493" class="wp-caption-text">short and stout</figcaption></figure>

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

8 Replies to “Collapse-O-Matic Excerpt Shortcode Test”

  1. Im trying to embed an expandable button within my theme.

    This doesn’t work:
    [button] [/button]

    This also doesn’t work:
    [expand title = %{%button%}%"Ortopedische fysiotherapie" %{%/button%}%]

    What should the code look like if I want to include a shortcode within the expand title shortcode?

  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.

  3. What about if I want a link within the collapsed area? I tried using:

    %(%a href=”#”%)%Read More%(%/a%)%

    and it didn’t work. Any help is greatly appreciated.

    Thanks,

  4. simply try:
    [expand title='this is (normal link using double quotes)']target text[/expand]
    The trick is to wrap the title in single quotes and the href value of the link in double quotes.

Comments are closed.