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]
…
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]
…
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]
…