---
title: "Styling the Collapse-O-Matic plugin for WordPress"
author: "Alex"
date: 2017-11-16
lang: en
source: https://voneff.de/en/styling-the-collapse-o-matic-plugin-for-wordpress/
---

# Styling the Collapse-O-Matic plugin for WordPress

I used the [Collapse-O-Matic plugin](https://wordpress.org/plugins/jquery-collapse-o-matic/) 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](https://plugins.twinpictures.de/plugins/collapse-o-matic/documentation/#arrows)):

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](https://www.w3schools.com/cssref/pr_background-position.asp):

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

Overall, a pretty good experience with [this plugin](https://wordpress.org/plugins/jquery-collapse-o-matic/)!