Read More / Less

This element is for being able to collapse/expand long blocks of content with customizable “Read more” and “Read less” button and icon.

Fully Expand in Builder – View either as collapsed or expanded while viewing inside the builder. Collapsed will take into account the collapsed height and show the element as it will appear on the front end. Expanded is useful for editing the content, while previewing.

Collapsed Height – This will set the maximum height of the component in it’s collapsed state. The content inside that has a larger height will be hidden. If the content is smaller than the collapsed height (taking into account the ‘height margin’ set as a buffer, the element will leave the content as is and there will be no read more button added.

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

Content

These are the possible sources for the content:

  • Editor
  • Add Elements (coming soon)

Read More Button

Customise the button text, style the button and change the alignment from this tab. Remember to style the hover/focus is done through Bricks’ psuedo class dropdown at the top of the builder.

Button fade duration – This controls the small fade effect that happens as the read more is expanded and the button changes text.

Read More Icon

Choose to display any icon inside the read more button and have it rotate in the different states.

Fade Gradient

The fade gradient settings allow you to create a gradient the top of the content inside of the element to better indicate that there is more to read than what is currently visible. The transparency has a ‘start’ and ‘end’ percentage to allow you control exactly the point where the content fades to transparent.


Developer Docs: Events

The Read More / Less element triggers events on both expanding and collapsing. If you’re needing to trigger something when this happens, the events are..

x_readmore:expand – triggered just as the read more begins to expand
x_readmore:collapse – triggered just as the read more begins to collapse
x_readmore:expanded – triggered just as the read more finishes expanding
x_readmore:collapsed – triggered just as the read more finishes collapsing

Sample code:

const readMore = document.getElementById('readmore-1');

readMore.addEventListener("x_readmore:expand", function() {
 // do something as element starts to expand
});

Needing to use a read more element inside hidden content or dynamically added content (where the height would be unknown on page load), you can use this function to add it in when it’s needed.

doExtrasReadmore(container) – where ‘container’ is the container element with the read more element(s) inside.

This will then calculate the need for the read more button based on the height of the newly added content.