University of Florida Homepage
College of Liberal Arts and Sciences

Sample Site
Make a Gift
Make a Gift

This is a header alert with a link.

Collapse-o-matic

The “Collapse-o-matic” plugin allows you to have expandable lists of content or “Read more” popdown content. Please see the styles below and follow instructions for how to implement them. You may also submit a ticket for assistance. Advanced users may be interested in additional shortcode functionality shown here.

Style #1: Arrow icon

To achieve the following…

First expandable title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Second expandable title

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

…use this in your WordPress editor (in the Text tab):

[expand title="First expandable title"]
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
[/expand]
[expand title="Second expandable title"]
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
[/expand]

Then add this to the “Additional CSS” section under Appearance > Customize:

.collapseomatic {
display: block;
width: fit-content;
}

Style #2: Simple links

To achieve the following…

First expandable title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Second expandable title

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

…use this in your WordPress editor (in the Text tab):

<div class="remove-default-arrow">
[expand title="First expandable title"]
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
[/expand]
[expand title="Second expandable title"]
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
[/expand]
</div>

Then add this to the “Additional CSS” section under Appearance > Customize:

.remove-default-arrow .collapseomatic {
background: none;
border-bottom: 1px solid #337ab76b!important;
color: #246faf;
padding: 0 0 1px;
}
.remove-default-arrow .collapseomatic:hover {
text-decoration: none;
}
.collapseomatic {
display: block;
width: fit-content;
}

Style #3: Title that changes when item is expanded

To achieve the following…

→ Click to expand first title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

→ Click to expand second title

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

…use this in your WordPress editor (in the Text tab):

<div class="remove-default-arrow">
[expand title="→ Click to expand first title" swaptitle="↓ Click to close first title"]
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
[/expand]
[expand title="→ Click to expand second title" swaptitle="↓ Click to close second title"]
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
[/expand]
</div>

Then add this to the “Additional CSS” section under Appearance > Customize:

.remove-default-arrow .collapseomatic {
background: none;
border-bottom: 1px solid #337ab76b!important;
color: #246faf;
padding: 0 0 1px;
}
.remove-default-arrow .collapseomatic:hover {
text-decoration: none;
}
.collapseomatic {
display: block;
width: fit-content;
}

Style #4: Orange “+” symbols with blue hover

To achieve the following look…

First expandable title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Second expandable title

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

…use this in your WordPress editor (in the Text tab):

<div class="orange-plus">
[expand title="First expandable title"]
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
[/expand]
[expand title="Second expandable title"]
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
[/expand]
</div>

Then add this to the “Additional CSS” section under Appearance > Customize:

.orange-plus .collapseomatic {
font-size: 1.35rem;
color: #004083;
padding: 0.75rem 0 0.25rem 2.25rem;
display: block;
text-indent: -2.25rem;
background: none;
}
.orange-plus .collapseomatic:before {
content: "\f0fe";
font-family: "Font Awesome 5 Pro";
color: #f45a1d;
margin-right: 1rem;
transition: .3s;
}
.orange-plus .colomat-close:before {
content: "\f146";
}
.orange-plus .collapseomatic_content {
margin-left: 2.25rem;
margin-top: 1rem;
}
.orange-plus .collapseomatic:hover:before {
color: #00285e;
transition: .3s;
}
.orange-plus .collapseomatic:hover {
text-decoration: none;
}
.collapseomatic {
display: block;
width: fit-content;
}