Category: Uncategorized

November 2014

January 2015

This is a simple test to verify that Collpase-O-Matic, Collapse-Pro-Matic and Collapse-Commander all work fine with the CM Tooltip Glossary plugin.

This is a test of a new tabindex attribute feature. Assigning the tabindex attribute a numerical value will set the tabindex attribute for the trigger. We are going to use the number three, because we really like this number.

Now what this will do is assign a tabindex of three to the trigger so you should now be able to hit the tab button and eventually land on the trigger. Something to note:

In HTML5, the tabindex attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).

In HTML 4.01, the tabindex attribute can be used with: <a>, <area>, <button>, <input>, <object>, <select> and <textarea>.

So, with that in mind:

HTML 4.01

[expand title="Trigger Text" tag="a" tabindex="3"]Target Content[/expand]
When this item is tabbed to, it will be clearly displayed as in-focus due to a nice little frame or border around the element.
Trigger Text

HTML 5

[expand title="Trigger Text" tabindex="3"]Target Content[/expand]
Although this item has the same tabindex value as above, since it is using the default tag of DIV it will NOT be visibly shown as in-focus with a frame.

To display a visible change when our item is in focus, simply create a class for the trigger (using trigclass) and define the :focus pseudo class with an outline like so:

CSS
.lookatme:focus {
outline: #ccc dotted 2px;
}
[expand title="Trigger Text" tabindex="3" trigclass="lookatme"]Target Content[/expand]

Now here is a fun fact:
tabindex="0" allows the element to be placed in the default navigation order.
[expand title="Trigger Text" tabindex="0" trigclass="lookatme"]Target Content[/expand]

Change Open Close Arrows

First create and upload two images. One image for the collapsed state, one for the expand state.
In this example we are using the following images:

Next we want to create a new class for these arrows. We are going to use the name greenballs. The class definitions need look like so:

CSS

.collapseomatic.greenballs {
background-image: url(full_url_to_collapsed_icon.png);
}
.colomat-close.greenballs {
background-image: url(full_url_to_expanded_icon.png);
}

Now we need to assign the trigclass attribute our value of ‘greenballs’

[expand title="Trigger Text" trigclass="greenballs"]Target Content[/expand]
This will produce the following:

Now we need to adjust the padding so that the left side of the trigger text is not so smashed-up against the icons. To adjust the vertical centring we need to adjust background-position of the background url as well. Here is how the CSS will look after we make these changes:

CSS

.collapseomatic.greenballs {
background-image: url(full_url_to_collapsed_icon.png);
background-position: left center;
padding-left: 35px;
}

Looking much better now:

Now If we have a list of expand elements, it might be nice to have a little border that separates each element. Also a bit more vertical padding between the elements:

CSS

.collapseomatic.greenballs {
background-image: url(https://spacedonkey.de/wp-content/uploads/2014/12/circle_plus.png);
background-position: left center;
padding-left: 35px;
padding-top: 15px;
border-bottom: 1px dotted #dfdfdf;
}
Almost complete:

All that is left to adjust is the spacing and add bottom border to the hidden content. Add a new class for and assign it using the targclass attribute:

[expand title="Trigger One" trigclass="greenballs" targclass="gb_target"]Target Content[/expand]

CSS

.gb_target{
padding: 15px;
border-bottom: 1px dotted #dfdfdf;
}

And the Final result:

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]

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]

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.

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

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]

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]

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

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:

This is the test page for a new plugin Isotope-O-Matic. The plugin will drop in the Isotope library to create fancy-schmancy gallery thing-a-ma-jigs

Here are some images in a div:

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

This is an expand element from Collapse-O-Matic:
[expand title='trigger']target[/expand]

and this is an example of a link to an image that should pop up using fancy box: