Season: Spring 2015
May 2015
July 2015

Posted on

Collapse-O-Matic Table of Content Test

This is a test that features a table of content from the Table of Content plugin as well as a collapse-o-matic expand element AND a collapse-commander element.
[toc wrapping=”right”]

This is an H1 heading

This is a heading

This is the content area and it has a collapse element in it:

[expand title="This is the expand element"]...and this is the target content[/expand]
This is the expand element
…and this is the target content

This is another h2 heading

This is an expand element element from Collapse Commander:

[expand cid="1398"/]
Test Expand Element
This is the content of the expand element early_oculous

This is a third h2 element

  • list item
  • list item
  • list item
  • list item

This is another H1 heading

Fourth heading element

Fifth heading, how do you like it?

Posted on

Collapse-O-Matic TrigPos Test

This is a quick test of the trigpos attribute.

Normally, an expand element shortcode looks and works like this:

[expand title="trigger"]hidden content[/expand]
trigger
hidden content

now we are going to add the trigpos attribute:

[expand title="trigger" trigpos="below"]hidden content[/expand]
hidden content
trigger

And this works exactly the same way for collapse-pro-matic, of course.

Posted on

Collapse-O-Matic FAQ Trigger by Mouse Hover

Q: Can this work on mouseover or hover?

A: This is a question we get quite often. The plugin does not work with hover. We have created custom versions for clients in the past that does this, however you really need to think through how you will deal with touch devices that do not have a ‘hover’ state.

Also, when you hover over and item, how will your user close it? On mouse HoverOut is the easy answer, but then the user can never select or click on anything in the target area.

In short, it can be done but it’s a complex interaction that needs to be well planned out.

Here is an example of a plugin we custom built for a client.

Posted on

Table of Contents Plus Test

Note: Currently de-activated to test Table of Content plugin.

This is a test that features a table of content from the Table of Contents Plus plugin as well as a collapse-o-matic expand element AND a collapse-commander element.
[toc wrapping=”right”]

This is an H1 heading

This is a heading

This is the content area and it has a collapse element in it:

[expand title="This is the expand element"]...and this is the target content[/expand]
This is the expand element
…and this is the target content

This is another h2 heading

This is an expand element element from Collapse Commander:

[expand cid="1398"/]
Test Expand Element
This is the content of the expand element early_oculous

This is a third h2 element

  • list item
  • list item
  • list item
  • list item

This is another H1 heading

Fourth heading element

Fifth heading, how do you like it?

Posted on

T(-) Countdown Control Omit Weeks

Way to omit weeks from the countdown:

a) Add the omitweeks=”true” attribute to your shortcode (if using a shortcode)
not working

b) tick the omitweeks box in the widget settings (if using a sidebar widget)

c) tick the omitweeks box in the T(-) Countdown Control options page.

Posted on

Collapse-O/Pro-Matic CSS Tricks II – Font Awesome Arrows

First make sure Font Awesome is installed.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Or use a plugin such as Font Awesome Icons to have it installed for you.

We are going to use the following two Font Awesome Arrows:

<i class="fa fa-arrow-circle-down"></i>

<i class="fa fa-arrow-circle-up"></i>

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

.collapseomatic.awesomearrows {
    background-image: none;
}
.collapseomatic.awesomearrows:before {
    font-family: FontAwesome;
    content: "\f0ab";
}
.colomat-close.awesomearrows {
    background-image: none;
}
.colomat-close.awesomearrows:before {
    font-family: FontAwesome;
    content: "\f0aa";
}

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

[expand title="Trigger Text" trigclass="awesomearrows"]Target Content[/expand]