![foleon_logo_white.png]](https://www.foleon.com/hs-fs/hubfs/foleon_logo_white.png?height=40&name=foleon_logo_white.png){kind=logo}
Sometimes, you want to include extra context — a personal story, a detailed table, or an FAQ — without overwhelming your reader or cluttering your layout. That’s where Reveal & Hide Blocks come in. They let you neatly tuck content away inside a collapsible section that expands when clicked, keeping your page clean and easy to navigate.
In this article
What is a Reveal & Hide Block?
Reveal & Hide Blocks let you place content inside an expandable section. When readers click the "+" icon (or anywhere on the block), the hidden content expands. Clicking again collapses it.
This keeps your core message front and center, giving curious readers the option to dive deeper without leaving the page. Consider this an alternative to overlays — especially useful on mobile.
You might use Reveal & Hide Blocks to display sections such as personal stories, extra descriptions, FAQs, supporting data, or anything that’s informative but not essential upfront.
How to create a Reveal & Hide Block
Hover over the block that you want to make collapsible. In the purple block toolbar, click the settings icon ⚙️.
In the block settings panel, select Reveal & Hide. Then, click Add to block.
Your block will now be collapsed, and you'll see a new full-width bar with a "+" button and the default text 'Click here to learn more.' You can click in the text box to adjust the text as needed.
Clicking anywhere in the block will open the hidden content. You can add elements like text, images, buttons, or tables — just like in any other block.
How to remove the Reveal & Hide settings from a Block
If you want to revert to a standard block, you can remove the Reveal & Hide setting from the block.
Expand your content and click the settings icon ⚙️ on the purple block toolbar,
Open the Reveal & Hide section. Click the option 'Remove from block' and confirm. Your content will now be converted to a standard block.
Styling options
"+" icon
This icon is considered a navigation element, so its color is inherited from the Page Arrow settings. You can update this default in your brand settings.
📖 Learn how to adjust the style of your Page Arrows here.
You can also customize the reveal & hide bar manually. Below we'll explain the settings you can adjust.
Text styling
Use the standard text toolbar to update the font, size, and alignment of the text.
Background color
Change the background color of the collapsed section in the Reveal & Hide settings.
Icon color
Controls the color of the “+” symbol inside the button.
Icon background color
Sets the background color of the button behind the “+” symbol.
Top and bottom spacing
Add spacing above and below the icon and text.
Icon alignment
Choose where the icon appears in relation to the text:
- Top: The "+" icon will be above the text
- Bottom: The "+" icon will be below the text
- Left: The "+" icon will be on the left side of the text
- Right: The "+" icon will be on the right side of the text
Icon size
Adjust the size of the "+" icon.
