Thumbnail
Read More

Developed by

Beginner
Beginner
This is a very effective way to fold information, including pictures. I have been very impressed by the developer…

tangent

You can collapse the height of one or more blocks in sequence, including blocks in multi-column layouts.

This package works with most standard concrete5 blocks, and should work with most add-on blocks and grid frameworks. It has been tested against multiple themes.

WARNING

This add-on changes the basic structure of your web page. Accordingly, it may not work well in some environments (eg, with other add-ons that behave similarly). Before purchasing this package, please try the free trial version. If that doesn't work for you, neither will this!

Use

Place a 'Read More Top' block above the blocks you wish to collapse, and a 'Read More Btm' (bottom) block below the blocks you wish to collapse (ie, make a block sandwich).

Top and Btm blocks should not straddle structural divisions on a page. For example, don’t put a Top block above a layout, and the corresponding Btm block within the layout. Likewise, don’t put a Top block in column 1 of a layout, and the corresponding Btm block in column 2 of a layout.

If matching ‘Read More Top’ and ‘Read More Btm’ blocks can’t be found, an expanatory error message will be printed to the browser’s console.

Customisation

When adding or editing a Btm block, you can specify the following:

  • height of collapsed blocks
  • whether a fade-out effect is applied to the bottom of the collapsed blocks
  • text to display on 'read more' button
  • text to display on 'read less' button
  • speed of transition from collapsed to full height (and vice versa).

Fade-out Colour

To fade out the collapsed block(s), a colour transition is applied. The colour used will be taken from the topmost enclosed block, enclosing layout column, enclosing layout, area or page (in that order of preference). For examples, see here.

Applying different background colours to blocks in a read-more set may result in a colour mismatch.

Margins

To  specify a top margin for the uppermost block in the read-more set, apply the margin to the ‘Read More Top’ block.

To  specify a bottom margin for the lowest block in the read-more set, apply the margin to the ‘Read More Btm’ block. This margin will also be applied to the ‘Read less’ button.

The left and right margins of all enclosed blocks are assumed to be the same.

Custom Styles

Borders around enclosed blocks may be truncated, and should not be used.

To apply custom styles to all of the blocks within the read-more set, place the blocks (including Read More Top and Read More Btm) inside a layout (a single-column layout is fine). Then, edit the area design for the column. Using this method, you can get a border around all of the enclosed blocks (including the ‘Read Less’ button) that expands and collapses appropriately.

Current Version: 1.1.0
Fully Translatable: Yes
Needs External Libraries: No
Compatible 5.7.5.6+
License: Standard
Support Response: Replies to tickets every few days.
Support Hosted: On concrete5.org
Needs extra server permissions: No
Needs Internet: No
Marketplace Tests:
Passed Automated Tests
Passed PRB Review