Read More shows the beginning of a long text — up to a height you choose — and a View More button. Clicking the button reveals the rest; a View Less button folds it back. It keeps long articles, policies or descriptions from dominating the page while leaving them one click away.
What it is for
Use it for content that must be on the page in full (for legal or search reasons) but that most visitors will only skim: a detailed programme, a long “about” text, terms, methodology notes. Several Read More blocks can follow each other, each with its own title.
See it live on the example page APB Read More.
Structure
- The Read More component carries the shared settings (section title, width, placement, container).
- Read More Items — one per collapsible text. Each item decides its own collapsed height, button labels and color, so one component can hold several blocks with different settings.
Component settings
| Setting | Options | Default | What it does |
|---|---|---|---|
| Section Title / Show Section Title | text; No / Yes | — / No | See Section Title and Intro Text. This component has no Intro Text; use the item Body instead. |
| Target Placement | Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3 | Body | See Target Placement. |
| Component Width | 25% … 100% | 100% | See Component Width. |
| Custom Class / Access Control | — | — | See Advanced settings. |
| Container Settings | — | 32px bottom margin | See Container Settings. |
Read More Item fields
| Field | Required | What it does |
|---|---|---|
| Title | yes | Heading of the block; displayed only when Show Title is Yes (it is always used in the editor). |
| Show Title | yes (No) | Whether the Title appears above the text. |
| Body | yes | The full text (rich text). |
| Collapsed Height | yes (200px) | 0px … 400px in 50px steps: how much of the Body is visible before the button. 0px hides the whole text behind the button. If the text is shorter than this height, no buttons are shown and the text appears in full. |
| Color Style | yes (Blue) | Color of the buttons (second palette: Blue, Blue and Green, Gray, Green, Orange, Red, Teal Blue, Yellow). See Color Style. |
| More Link Text / Less Link Text | yes | Labels of the two buttons (default “View More” / “View Less”). Translate or adapt them: “Show full programme”, “Hide”. |
| Description (internal) / Custom Class | no | Editor note (never shown) / extra CSS class. |
How to use it
- Click Add Read More and set a Section Title.
- Click Add new Read More Item. Paste or write the full text in Body.
- Pick a Collapsed Height that ends after the first paragraph or two — enough to show what the text is about.
- Adjust the button labels and color, then click Create.
- Save and test: the text should fade out at the chosen height and expand on click.
Tips
- Choose the collapsed height so the cut does not fall in the middle of an image or a heading.
- For several independent sections with titles, an Accordion is often clearer than a stack of Read More blocks.
- Search engines and screen readers see the complete text; Read More only changes what is visible.
For site builders
| Item | Value |
|---|---|
| Module | apb_pb_read_more |
| Paragraph types | apb_pb_read_more, apb_pi_read_more |
| Requires | apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, Entity Access by Role Field, core Options / Taxonomy / Text |
| Own vocabulary | apb_tax_rm_cpsd_height (0px … 400px) |
| Shared vocabularies | apb_tax_cs_02 (per item), apb_tax_width, apb_tax_target_placement |
| Front-end | apb_pb_read_more/frontend: collapse/expand from data-apb-*; button colors injected as inline CSS per item. |
| Container settings | Full profile. |
| Example page | /apbuilder_examples/apb-read-more |