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…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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;
}