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. The read more links are added dynamically, meaning it works well with dynamic content. ie if there’s not enough content, no link will be added.

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 – (minimum is 1px) This will set the maximum height of the component in its 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
• Nest Elements

If you need text, whether dynamic or just straight-up text in the builder, the editor is the simplest option. For most control over styling and adding different types of elements, choose ‘nest elements’ and then drag in any Bricks elements into the container.

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.

How to use the Read More / Less element

Add the element inside a Section’s Container.

Checking on the frontend, you may not see the ‘Read More’ button by default.

Set the Collapsed height to say, 100 and reload the page to see the button.

Test the expand/collapse functionality to make sure it is working.

To change the default content, expand the CONTENT control group, delete the default text and type/paste in your own.

It is also nest elements instead of having a static text.

To do this, change the Content to ‘Nest elements’.

and add your desired elements.

Ex.:

Now, let’s see how this element can be used with dynamic post content in a query loop.

Add a Block inside the Container, enable query loop on it. Change your post type as needed.

Add Post Title, Image with source set to featured image and Post Content elements inside the Block.

Let’s move the featured image and post content element inside a Read More / Less element, like this:

Check the frontend. For each post, only a part of the image should be visible and visitors will have to click the Read More button to reveal the rest.