Read More / Less

A component for collapsing and expanding long blocks of text (or any elements you like) with customisable “Read more” and “Close” links.

Any content that is taller than 200px will get auto-collapsed by default. This height can be changed in the component’s settings.

Option Controls

Collapsed Height

Set the height of the container in its collapsed state before it is opened. This height can be changed across different screen sizes.

Animation Speed

Control the timing in milliseconds for the entire opening or collapsing of the container.

Read More Link

Edit the link text for both the ‘read more’ and ‘read less’ links & style the colors, typography and spacing of the links.

FAQ

How to re-initialize Read more JS inside Repeater after filtering with Search & Filter Pro?

Read more does not appear after posts have been filtered when using Search & Filter Pro. Here’s the fix.

Add the following in the JS area of a Code Block:

// listen for ajax finishing
jQuery(document).on("sf:ajaxfinish", ".searchandfilter", function($){
       
       // reinitialise readmore inside repeater
       doExtrasReadmore(jQuery('.oxy-dynamic-list'));
  
});

How to position the arrow below the read more text?

Enable read more icon and select down pointing arrow.

Add this sample CSS in a Stylesheet at Manage > Stylesheets:

#-read-more-less-28-2 .oxy-read-more-link_icon {
  position: absolute;
  top: 40px;
}

where -read-more-less-28-2 is the ID of the component.

Note: For showing just the read more text w/o the contents, you can set the Collapsed Height’s to 0.

chevron-down