[read_more]

The shortcode provides functionality to create expandable content sections with “Read More” links.

Product

Launchpad Platform

Shortcode Attributes

There are a number of shortcode attributes available which you can use to customize the output.

  1. key – Determines which part of the content to return.
    • Default: more_less.
    • Options: more_less, full, teaser, more. Specify one only.
  2. read_more_text – The text to display for the “Read More” link.
    • Default: Read More.
    • Options: Any text value.
  3. type – The type of expansion.
    • Default: tag.
    • Options: tag (uses <!–more–> tag) or height (height-based truncation).

Shortcode Enclosed Content

Any content placed between [read_more] and [/read_more] will be used as a template, where {content} acts as a placeholder for the post content.

Example Usage

Example 1:

[read_more]Your content here with <!--more--> Hide content[/read_more]

Results

<div class="hic-more-content tag-based-type" data-expanded="false" data-base-type="tag">
	<div class="hic-preview-content">
		<p>Your content here with</p>
	</div>
	<div class="hic-content" style="display:none;">
		<p>Your content here with</p>
		<p>Hide content</p>
	</div>
	<a class="hic-read-more">
		<span class="hic-label" aria-label="Read More">Read More</span>
	</a>
</div>
This example displays an expandable content section that initially shows only the text before the tag with a “Read More” link, and reveals the hidden content after the tag when clicked.
This shortcode works only in the Classic Editor in Page Content Builder.
When using the ‘tag’ type, content before the tag becomes the teaser content.

Example 2:

[read_more type="height"]Your long content that will be truncated by height[/read_more]

Results

<div class="hic-more-content height-based-type" data-expanded="false" data-base-type="height">
	<div class="hic-content"><p>Your long content that will be truncated by height.</p>
	</div>
	<a class="hic-read-more">
		<span class="hic-label" aria-label="Read More">Read More</span>
	</a>
</div>
This example displays a height-limited content section with a “Read More” link that expands to show the full content when clicked, truncating the text based on CSS height constraints rather than using a tag split.
The ‘height’ type will show the full content but truncate it via CSS.