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.
CSS
.collapseomatic.my_special_class {
color: green;
}
.collapseomatic.my_special_class.colomat-close {
color: red;
border: 2px dotted red;
}
Shortcode
[expand title="Trigger Text" trigclass="my_special_class"]Hidden Content[/expand]
Result
Trigger Text
Hidden Content
Nice plugin; I’m using it on several sites. Is it possible to add an href button or some kind of text link in the post/page editor (outside of the[expand ] shortcodes) to force collapse all divs that are open? A link that would trigger the jQuery .collapseomatic.colomat-close for all? Thanks
You mean like this?
Further support for our free plugin is offered at:
https://wordpress.org/support/plugin/jquery-collapse-o-matic
If you require personal support, Collapse-Pro-Matic comes with a very high level of support, including getting the issue resolved directly on your page, with a step-by-step explanation of what we did.