--- title: Expand Block description: How to use the Expand block in Ultimate Blocks to show a preview of your content with a show more link that reveals the rest, plus scroll settings and Pro options. url: "https://ultimateblocks.com/docs/expand-block/" updated: "2026-11-07" category: "Content & Layout Blocks" --- # Expand Block The **Expand** block in Ultimate Blocks lets you show the first part of your content and hide the rest behind a **show more** link. Readers click it to see the full content and click **show less** to collapse it again. The block is free, and Ultimate Blocks Pro adds a fade effect on the preview and a button style for the toggle link. | **Block name in the editor** | Expand | | --- | --- | | **Plan** | Free (fade effect and button style need Pro) | | **Best for** | Long descriptions, author bios, terms, spoilers, transcripts and optional details | | **Live demo** | [See the Expand block in action](https://ultimateblocks.com/expand-block/) | ## What you can use it for - Shorten long product or service descriptions with a read more link. - Show a short author bio or team member profile that expands to the full story. - Hide spoilers, solutions or answers until the reader asks for them. - Keep transcripts, terms or technical details on the page without making it look long. - Fade out the end of the preview text so readers know there is more (Pro). ## How to add the Expand block 1. Open the post or page in the WordPress block editor. 2. Click the **+** (Block Inserter) button. 3. Search for **Expand** and click the block to add it. ![Add the Expand Block](https://ultimateblocks.com/wp-content/uploads/2023/05/Add-the-Expand-Block.png) ## Add your content The block has two parts. Each part can hold any blocks: paragraphs, headings, images, lists, videos and more. - **First part (always visible):** click the **+** inside it and add the content readers see first. It ends with the **show more** link. - **Second part (hidden at first):** add the content that appears after readers click show more. It ends with the **show less** link. In the editor, this part is shown only while the Expand block or something inside it is selected. ![Add a Paragraph to the Show More Section](https://ultimateblocks.com/wp-content/uploads/2023/05/Add-Paragraph-to-the-Show-More-Section.png) ![Add Content to the Expand Blocks](https://ultimateblocks.com/wp-content/uploads/2023/05/Add-Content-to-the-Expand-Block.png) ### Change the show more and show less text Click the **show more** or **show less** text in the editor and type your own words, for example *Read the full bio* or *Hide details*. Use the alignment buttons in the toolbar of each part to align its link left, center or right. ![Name the Expand Block Sections](https://ultimateblocks.com/wp-content/uploads/2023/05/Customize-the-Expand-Button-Text.png) Here is how the Expand block works on the front end: ## Settings tab Select the Expand block and open the block sidebar. The **Settings** tab (gear icon) has this panel: ### Scroll Settings When a reader clicks show less on long content, the top of the block can end up above the screen. Scroll settings bring the reader back to the start of the block. - **Allow scrolling:** scroll back to the top of the block when the reader collapses it. - **Scroll offset adjustment:** stop a sticky header from covering the block. Choose **Relative to first available fixed/sticky element** (detects your sticky header), **Relative to a specific element** or **Fixed height**. - **Scroll reference name type** and **Reference element for scroll offset:** (Relative to a specific element) choose id, class or element and enter its name, for example the ID of your header. - **Scroll offset (pixels):** (Fixed height) the space to leave at the top, from 0 to 200 pixels. - **Fade when minimized** (Pro): fade out the bottom of the visible part while the content is collapsed. ## Styles tab Switch to the **Styles** tab (half-circle icon) to change spacing and, with Pro, the button style: - **Dimension Settings:** **Padding** and **Margin** around the block. - **Styles** (Pro): choose **Default** (text link) or **Button** to show the toggle as a button. - **Button Color** and **Button Background** (Pro, Button style): the text color and the background color or gradient of the button. - **Button Border** and **Button Border Radius** (Pro, Button style): add a border and round the corners. - **Button Padding** (Pro, Button style): the space inside the button, in Dimension Settings. The text inside each part uses the normal settings of the blocks you add (for example, a Paragraph block has its own color and typography options): ![Colorize the Block](https://ultimateblocks.com/wp-content/uploads/2023/05/Colorize-the-Block.png) ![Change Typography](https://ultimateblocks.com/wp-content/uploads/2023/05/Change-Typography.png) ## Pro features - **Fade when minimized:** the visible part fades out at the bottom while the content is collapsed. This shows readers that more content follows. - **Button style:** turn the show more and show less links into buttons and style them with Button Color, Button Background, Button Border, Button Border Radius and Button Padding. [Get Ultimate Blocks Pro](https://ultimateblocks.com/pricing/) to unlock these features. ## Extensions you can use with this block - [Visibility Control](https://ultimateblocks.com/docs/visibility-control/) (Pro): show the block only to certain users or on a schedule. - [Animation](https://ultimateblocks.com/docs/animation/) (Pro): animate the block when it comes into view. - [Responsive Control](https://ultimateblocks.com/docs/responsive-control/): hide the block on desktop, tablet or mobile. - [Custom CSS](https://ultimateblocks.com/docs/custom-css/): add your own CSS to this block only. - [Saved Styles](https://ultimateblocks.com/docs/how-to-save-a-style/) (Pro): save your design and reuse it on other posts. ## Frequently asked questions **How do I add a read more link that expands text in WordPress?** Add the Expand block from Ultimate Blocks. Put the preview in the first part and the rest in the second part. Readers click show more to see everything. **Can I change the show more and show less text?** Yes. Click the link text in the editor and type your own words, such as Read more or Hide. **Is the hidden content still indexed by search engines?** The hidden part is in the page HTML and is only hidden with CSS until the reader clicks show more, so search engines can read it. **Can I put images or videos in the hidden part?** Yes. Both parts of the Expand block accept any blocks, including images, videos, lists and embeds. **What is the difference between the Expand block and an accordion?** The Expand block shows a preview of one piece of content and reveals the rest. An accordion, like the Accordions (UB) block, has several titled sections that open and close separately. **Is the Expand block free?** Yes. The Expand block is part of the free Ultimate Blocks plugin. The fade effect and button style need Ultimate Blocks Pro. ## Related docs - [Accordions (UB) block](https://ultimateblocks.com/docs/content-toggle-block/) - [Tabs block](https://ultimateblocks.com/docs/tabbed-content-block-2/) - [Styled Box block](https://ultimateblocks.com/docs/styled-box-block/) - [Ultimate Blocks Free vs Pro](https://ultimateblocks.com/docs/ultimate-blocks-free-vs-pro/)