Category: Uncategorized

September 2014

November 2014

Normally, expand elements display the arrow on the left:
[expand title="trigger"]target[/expand]

However, we can move the arrow all the way to the right by assigning the the trigger the arrowright class:
[expand title="trigger" trigclass="arrowright"]target[/expand]

We can move the trigger closer to the text by changing the width of the trigger element using css:

CSS
.shorty {
width: 70px;
}
[expand title="trigger" trigclass="arrowright shorty"]target[/expand]

What if we want both left and right arrows? We first start with a roll-your-own expand element with no arrows by assigning the noarrow class to the trigger:

<div class="collapseomatic noarrow" id="my_double_arrow_01">trigger</div>
<div id="target-my_double_arrow_01" class="collapseomatic_content">target</div>

Then we manually upload the arrows we want to use and place them in the title:

<div class="collapseomatic noarrow" id="my_double_arrow_02"><img src="https://spacedonkey.de/wp-content/uploads/2014/10/arrow-down.png" width="12" height="14" /> trigger <img src="https://spacedonkey.de/wp-content/uploads/2014/10/arrow-down.png" width="12" height="14" /></div>
<div id="target-my_double_arrow_02" class="collapseomatic_content">target</div>

Finally we need to add a swap title element for the close arrows:

<div class="collapseomatic noarrow" id="my_double_arrow_03"><img src="https://spacedonkey.de/wp-content/uploads/2014/10/arrow-down.png" width="12" height="14" /> trigger <img src="https://spacedonkey.de/wp-content/uploads/2014/10/arrow-down.png" width="12" height="14" /></div>
<div id="swap-my_double_arrow_03" alt="" class="colomat-swap" style="display:none;"><img src="https://spacedonkey.de/wp-content/uploads/2014/10/arrow-up.png" width="12" height="14" /> target <img src="https://spacedonkey.de/wp-content/uploads/2014/10/arrow-up.png" width="12" height="14" /></div>
<div id="target-my_double_arrow_03" class="collapseomatic_content">target</div>

This is a test of the Collapse Command stystem:
[expand cid="1398"/]

Trigger Shortcode

[expand_trig cid="1403"] [expand_trig cid="1398" id="monkey"]

Target Shortcode

[expand_targ cid="1403"] [expand_targ cid="1398" id="monkey"]

Shortcodes

Normally when a shortcode is used, it would trigger the WordPress magic that makes a shortcode a short code:

Now, if we wanted to show what shortcode was used to make that magic happen, we simply need to escape it like so:
[[expand title=”trigger”]content[/expand]]
and that renders:
[expand title="trigger"]content[/expand]

we can even wrap it in a nice code tag to set it apart:
[expand title="trigger"]content[/expand]

so far so good.

HTML

Now lets say we want to escape a bit of HTML! Well, lets first try simply wrapping it in the code tag:

• item 1
• item 2
• item 3

Hmm… no good. All that seems to have done is render the HTML in the special css of a code tag.

What about using Markdown! Let’s wrap the HTML in backticks and see what happens…

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

Perfect! It even added that monospace font that makes code look even more code-like.

Now for the test…

Shortcode and HTML

Since we are using HTML we need to use Markup… what happens when we add in the shortcode?

<ul>
<li>item 1</li>
<li>item 2

</li>
<li>item 3</li>
</ul>

The HTML looks rockin’ but the shortcode… well that was just processed as normal. Hmm… lets try doing the double bracket thing:

<ul>
<li>item 1</li>
<li>item 2 [expand title="trigger"]content[/expand]</li>
<li>item 3</li>
</ul>

Wow! that totally worked. So there you have it: Problem solved!

[expand title="Pocket Calculator" id="kraftwerk" ]Target Content[/expand]

Direct Link

[expand title="Special Key" id="special_key" expanded="true"]Target Content[/expand]

Direct Link


<ul>
<li>first item</li>
<li>second item
[ expand title="read more" ] <ul>
<li>sub item one</li>
<li>sub item two</li>
<li>sub item three</li>
</ul>
<p>a paragraph of text</p>
[ /expand ]

third item

`


• first item
• second item
  
  read more
  • sub item one
  • sub item two
  • sub item three

  a paragraph of text

• third item

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 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]

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]

when an item is expanded it is assigned a class of:
colomat-close

We can then expand this class with css to do things like change the font color:

.colomat-close{
color: red;
}

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"]

Select Month August 2023 May 2023 March 2023 February 2023 June 2022 January 2022 December 2021

weekly:

• Mon, 21st August, 2023–Sun, 27th August, 2023
• Mon, 8th May, 2023–Sun, 14th May, 2023
• Mon, 27th March, 2023–Sun, 2nd April, 2023
• Mon, 20th February, 2023–Sun, 26th February, 2023
• Mon, 13th June, 2022–Sun, 19th June, 2022
• Mon, 24th January, 2022–Sun, 30th January, 2022
• Mon, 6th December, 2021–Sun, 12th December, 2021

Default/Left Arrow:
[expand title="arrow to the left"]<-- see that, that's left[/expand]]
[expand title="arrow to the left"]<-- see that, that's left[/expand] Right Arrow: [[expand title="arrow to the right" trigclass="arrowright"]checkout what is to the right -->[/expand]

No Arrow:
[expand title="no arrow to be found" trigclass="noarrow"]the arrow is not to be found[/expand]

Both Left & Right Arrow:
This method requires the extra-trigger feature of Collapse-Pro-Matic and must be built using the roll-your-own method and a bit of css:

Magic CSS

Place the following css in the collapse-o-matic (or collapse-pro-matic) plugin options page, under Custom Style:

.magic_beans {
display: inline;
float: left;
margin-right: 1.2em;
}

.clear {
clear: both;
}


Roll-Your-Own Method w/ Magic CSS

<div class="collapseomatic magic_beans" id="doublearrow" title="double arrows!">double arrows!</div><div class="collapseomatic magic_beans" id="extra-doublearrow"></div>
<div id="target-doublearrow" class="collapseomatic_content clear"><--to the left, to the right--></div>