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.

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

2 Replies to “Collapse-O-Matic CSS Tricks .colomat-close”

  1. 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

Leave a Reply

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