Collapse-O-Matic CSS Tricks .colomat-close

When an expand element is expanded it has the .colomat-close class assigned. This class is removed when the expand element is collapsed. So, if you want to adjust how an active/expanded trigger is displayed, simply define your custom css as follows:

/*inactive/collapsed */
.collapseomatic {


/*active/expanded */
.collapseomatic.colomat-close {


Simple Demo

Using the trigclass attribute we can further assign the design of the triggers for only specific expand elements.


.collapseomatic.my_special_class {
    color: green;

.collapseomatic.my_special_class.colomat-close {
    color: red;
    border: 2px dotted red;


[expand title="Trigger Text" trigclass="my_special_class"]Hidden Content[/expand]


Trigger Text
Hidden Content