Collapse-O/Pro-Matic CSS Tricks – Arrows

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: