Use the Details block to include content hidden under a collapsible section. It’s commonly used for video/audio transcripts, disclosures, and extra details you don’t want immediately visible.
Click here for an example of the Details block.
This is hidden content.
You can add a Details block to your pages, posts, templates, or template parts. Follow these steps to add the Details block:
- Visit your site’s dashboard.
- Navigate to Pages or Posts and click the page/post you want to add the content to.
- Click the + block inserter icon.
- Search for “Details block”.
- Click the block’s icon to add the block to the post or page:
💡
Using your keyboard, you can also type /details on a new line and press enter to quickly add a new Details block.
For more information, visit our detailed instructions on adding blocks.
When you first add the Details block into your post or page, you will have two sections:
- Summary: This is where you add the text that will be fully displayed on the page.
- Hidden blocks: This is where you add the text that won’t be shown until the visitor clicks on the summary.
Start by adding a summary text that your visitors will click on to expand and reveal the hidden content. To add a summary, click on the details block where you see “Write summary” and begin typing:
Next, set up your hidden content by clicking where it says “Type / to add a hidden block“. You can start typing text here. You can also add any other blocks into the hidden section, including headers, lists, and images.
If you have trouble working with hidden blocks, you can open the List View by clicking the three horizontal lines icon in the upper left corner. This will show you a list of all blocks on the page. Hidden blocks will appear indented underneath the summary, where you can select, move, and add more blocks as needed:
When you click on the block, a toolbar of options will appear above it:
The Details block has the following options in its toolbar:
- Change block type.
- Drag the block.
- Move the block up or down.
- Align to wide or full-width.
- More options.
When you select a block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click the Settings icon in the top-right corner to bring up the settings. This icon looks like a square with two uneven columns:
To display your hidden content by default on the page, you can use the “Open by default” option. To enable this feature set the toggle next to “Open by default” to On.
You can find additional information on the block’s advanced settings here.
Click on the cog/gear icon to access additional settings for the Details Block.
