Category: Uncategorized
October 2014
December 2014

Posted on

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

Adding Collapse-O-Matic to Static HTML

Collapse-O-Matic is a WordPress plugin. But what if you wanted to use it on a static HTML page?
Well, that just might work.

Step 1: make sure jQuery is installed

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Step 2: install collapse.js

You will need to download the latest version of Collapse-O-Matic and then find and upload just the collapse.js file. It’s located in the js sub-folder.
<script src="http://yourdomain.com/path_to_js/collapse.js"></script>

Step 3: Use the Roll-Your-Own Method

Now that you have all the jQuery scripts installed, you can simply follow the standard roll-your-own method to create the expand elements.

Good luck!

Posted on

Collapse-Pro-Matic Expand_On Attribute

[expand title="Trigger Text" expand_on="is_search"]Target Text[/expand]

Trigger Text
Target Text

This new conditional expand feature is based on a request by user thisimnot. We introduce a new attribute called expand_on that accepts a comma separated list of WordPress Conditional Tags that will auto-expand the element if true.

For example. The following element should be displayed as collapsed when viewing the front (blog) page, but when viewing the single post or the search results page it will be shown as expanded.

[expand title="Trigger Text" expand_on="is_single, is_search"]Target Text[/expand]

Trigger Text
Target Text

Adding Custom Conditional

To create a custom conditional that checks for a custom query_var, for example, is_hilite:

Step 1: Place the following in your child theme’s function.php file:

//Add query vars
add_filter( 'query_vars', 'my_query_vars' );
function my_query_vars( $qvars ) {
    $qvars[] = 'hilite';
    return $qvars;
}

//Add custom hilite conditional
function is_hilite(){
	if(get_query_var( 'hilite')){
		return true;
	}
	return false;
}

The shortcode:

[expand title="Trigger Text" expand_on="is_hilite"]Target Text[/expand]

Example:

Trigger Text
Target Text

test

Here, at the very bottom of this page is a little collapse element to test the internal WordPress Search.

grapple
It’s both a hook… and a kind of wrestling thing.

Posted on

Collapse-O-Matic Left And Right Arrows

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

trigger
target

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]

trigger
target

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]

trigger
target

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>
trigger
target

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>
trigger
target

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

New Plugin Test: Collapse Command

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

Test Expand Element
This is the content of the expand element early_oculous
Third Example – No Content

Trigger Shortcode

[expand_trig cid="1403"]
Test Expand Two
[expand_trig cid="1398" id="monkey"]
Test Expand Element

Target Shortcode

[expand_targ cid="1403"]
And this is some crazy text with a "quote" and a 'single quote' and some other wacky characters!ΓΌ#;
[expand_targ cid="1398" id="monkey"]
This is the content of the expand element early_oculous
Posted on

Escaping Shortcode Examples

Shortcodes

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

trigger
content

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

trigger
content
</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!

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