This is a very effective way to fold information, including pictures. I have been very impressed by the developer…
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.
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!
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.
When adding or editing a Btm block, you can specify the following:
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.
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.
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.