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]

One of the more common support issues with Collapse-O-Matic are related to unwanted spacing between collapse elements. While there are a number of reasons why this happens, the most common issues are extra ‘p’ or ‘br’ tags being added due to the strange way the wpautop filter. Often the spacing issue can be resolved by wrapping the expand elements in a div, removing any extra spacing or hard-returns between the expand elements, adjusting css, using different expand html elements (such as the ‘li’ element), or using the Collapse Commander add-on.

Example of a simple list using Collapse-O-Matic:

[expand title="Item One"]
This is some special text to display about item one
[/expand]
[expand title="Item Two"]
This is some special text about item two to display
[/expand]
[expand title="Item Three"]
Item three also has some special text to be displayed
[/expand]

Example using UL and LI elements:

<ul>
[expand title="Item One" tag="li"]
This is some special text to display about item one
[/expand]
[expand title="Item Two" tag="li"]
This is some special text about item two to display
[/expand]
[expand title="Item Three" tag="li"]
Item three also has some special text to be displayed
[/expand]
</ul>

• Item One
This is some special text to display about item one

• Item Two
This is some special text about item two to display

• Item Three
Item three also has some special text to be displayed

Example of a list using Collapse-Commander

[expand cid="1765"/]
[expand cid="1766"/]
[expand cid="1767"/]

example of internal content list without using filter attribute:

[expand title="Standard"]
This is some text on the first line
This is some text on the second line
This is some text on the third line
[/expand]

example of internal content list using filter attribute:

[expand title="Filtered" filter="true"]
This is some text on the first line
This is some text on the second line
This is some text on the third line
[/expand]

This is a test to see if both an image and text can be used as a trigger.

Shortcode:

[expand title="<img src='https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg'><br/>Trigger Text" trigclass="noarrow"]Hidden Target Content[/expand]

Without Text

[expand title="<img src='https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg'>" trigclass="noarrow"]Hidden Target Content[/expand]

Roll-Your-Own Method

With Text

<div class="collapseomatic noarrow" id="some_id_one" title="Hover over Trigger Text"><img src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg"/></br>Trigger Text</div>
<div id="target-some_id_one" class="collapseomatic_content ">Hidden Target Content</div>

Trigger Text

Without Text

<img src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg" class="collapseomatic noarrow" id="some_id" title="Hover over Trigger Text">
<div id="target-some_id" class="collapseomatic_content ">Hidden Target Content</div>

Roll-Your-Own Image Trigger with Swap Image

<img src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg" class="collapseomatic noarrow" id="some_other_id" title="Click to Expand">

<img src="https://spacedonkey.de/wp-content/uploads/2012/09/grillhead.jpg" class="collapseomatic noarrow" style="display:none" id="swap-some_other_id" title="Click to Collapse">

<div id="target-some_other_id" class="collapseomatic_content ">Hidden Target Content</div>

Above and Beyond

In this example we simply add the trigpos=”below” to place the trigger below the target area:

[expand id="aboveandbeyond" title="Above & Beyond" trigpos="below"]This is an example of an expand element that has the trigger below the target.[/expand]

Up Up & Away

In this example we will use the roll-your-own method to not only place the trigger below the target, but also:

1. position the target absolutely so that the trigger does not move down
2. attempt to make the content animate UP from the trigger

HTML
<div id="absolute">
<div id="target-upaway" class="collapseomatic_content">This is an example of an expand element that will "Slide Up" on top of the trigger when expanded and "Slide Down" into the trigger when collapsed.</div>
<div id="upaway" class="collapseomatic">Up Up & Away</div>
</div>

Notice that we have wrapped both the target and trigger elements in a div that has been assigned the id of “absolute”. We give this wrapping div absolute positioning and anchor it so many pixels off the bottom of the page using the following CSS:

CSS
#absolute {
position: absolute;
bottom: 60px;
padding-bottom:2%;
z-index: 100;
}

There are a couple of ways a button can be used as a collapse-o-matic trigger:

using a stylized div

shortcode:

[expand title="Push me" trigclass="noarrow my_button" targclass="my_content" tag="div"]this is the hidden content[/expand]

css:

.my_button {
background: #4B55E3;
color:  white;
padding:  5px;
width: 130px;
text-align: center;
}

.my_button.colomat-hover{
 background: #999;
text-decoration: none;
}

.my_content{
margin-left: 0;
}

Using a html button:

shortcode:

[expand title="Push me" trigclass="noarrow my_button" targclass="my_content" tag="button"]this is the hidden content[/expand]

Push me

Multiple Triggers

Add the format extra[n]-id to add extra external triggers for a single target:
<div id="test" class="collapseomatic">Trigger 1</div>
<div id="target-test" class="collapseomatic_content">You might think you can catch a monkey, but you can't. Monkeys are FAST!</div>
<div id="extra1-test" class="collapseomatic">Trigger 2</div>
<div id="extra2-test" class="collapseomatic">Trigger 3</div>

which should produce a little something like:

Multiple Targets

Multiple targets are available only in the Collapse-Pro-Matic plugin. To add extra targets, assign the ID in the format of target[n]-id as follows:
<div id="target1-monkey" class="collapseomatic_content">content</div>
<div id="monkey" class="collapseomatic">Trigger</div>
<div id="target2-monkey" class="collapseomatic_content">content</div>

which should produce a little something like: