Collapse-O-Matic Grey Bar Style

Here is an example of how to pimp the collapse-o-matic expand to use a grey bar style using CSS.
Be sure you are using the div ad your default tag in the plugin settings.

The CSS:
.greybar {
border: 1px dotted #aaaaaa;
padding: 7px;
background-position: 98% center;
background-color: #cccccc;

The Code:
[expand trigclass="arrowright greybar" title="Monkeys Are Fast"]…[/expand]

Monkeys Are Fast

To give the target content a border, use the targclass attribute:

The CSS:
.blueborder {
border: 1px dotted blue;
border-top: none;
margin-left: 0;
padding: 5px;

The Code:
[expand trigclass="arrowright greybar" targclass="blueborder" title="Monkeys Are Fast"]…[/expand]

Monkeys Are Fast

To add a graphic to the background, simply create a new class and add the appropriate css:

.de_flag {
background-image: url(;
background-size: 64px 16px;
background-repeat: no-repeat;
background-position: -10px center;
padding: 7px 7px 7px 42px;

then add the new class to the trigclass attribute:
[expand trigclass="arrowright greybar de_flag" title="Deutschland"]…[/expand]


2 Replies to “Collapse-O-Matic Grey Bar Style”

  1. Only the pro version can make this grey bars?
    I have the free version but this code doesn´t appear on my website, i want that the “tittle” looks like a button, but i can´t make it 🙁

Leave a Reply

Your email address will not be published. Required fields are marked *