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(https://lipis.github.io/flag-icon-css/flags/4x3/de.svg);
    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]
Deutschland

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 🙁

Comments are closed.