Styling the Collapse-O-Matic plugin for WordPress

I used the Collapse-O-Matic plugin for a recent project in order to display content with a so-called accordion effect: a visitor has to click on a headline or different element to reveal more content beneath.

The Collapse-O-Matic plugin stood out through its number of active installations (70,000) and by having a pretty large community around it that actively is supporting the plugin.

Just a few customizations were necessary.

I wanted to customize the arrows which let’s you open and close the “accordion”. As they are included as image files I made new ones in the format of 12×16px. In order to not having them overwritten when updating the plugin I uploaded them to an “/images” folder in my child theme and added the following to the style.css of my child theme (in order with the instructions by the plugin author here):

.collapseomatic {
    background-image: url(images/arrow-down.png) !important;
}
.colomat-close {
    background-image: url(images/arrow-up.png) !important;
}

I also wanted to move the arrows down a notch. As these are included as background images I used the CSS background-position property as detailed here on w3schools.com:

.collapseomatic {
    background-position: 0 6px!important; 
}
.colomat-close {
    background-position: 0 6px!important; 
}

Further customizations included indenting the content a little bit from the left and making some room to the bottom of the expanded content:

.collapseomatic {
    padding: 0 0 10px 22px!important;
}

.collapseomatic_excerpt, .collapseomatic_content {
    margin-left: 22px!important;
    padding: 0 0 16px 0!important;
}

Overall, a pretty good experience with this plugin!