--- title: "Opening Hidden Block Content (FooBox Pro)" id: "196435" type: "knowledgebase" slug: "foobox-hidden-block-content" published_at: "2026-07-24T09:19:35+00:00" modified_at: "2026-07-24T10:31:34+00:00" url: "https://fooplugins.com/documentation/foobox/block-editor/foobox-hidden-block-content/" markdown_url: "https://fooplugins.com/documentation/foobox/block-editor/foobox-hidden-block-content.md" excerpt: "FooBox Pro can open normal Gutenberg content as an inline lightbox. Build the content in a Group block, hide that Group on the normal frontend, and point a Button at its HTML ID." taxonomy_knowledgebase_cat: - "Block Editor" --- [Block Editor](https://fooplugins.com/documentation/foobox/block-editor/) # Opening Hidden Block Content (FooBox Pro) ## Related Articles - [Getting Started with FooBox in the Block Editor](https://fooplugins.com/documentation/foobox/block-editor/foobox-block-editor-getting-started/) - [Creating Image Lightboxes](https://fooplugins.com/documentation/foobox/block-editor/foobox-image-lightboxes-block-editor/) - [Creating Gallery Lightboxes](https://fooplugins.com/documentation/foobox/block-editor/foobox-gallery-lightboxes-block-editor/) - [Creating Button Lightboxes](https://fooplugins.com/documentation/foobox/block-editor/foobox-button-lightboxes-block-editor/) - [Creating Video and Iframe Lightboxes (FooBox Pro)](https://fooplugins.com/documentation/foobox/block-editor/foobox-video-iframe-lightboxes/) - [Creating Custom Lightbox Groups](https://fooplugins.com/documentation/foobox/block-editor/foobox-custom-lightbox-groups/) - [Using FooBox with the WordPress Core Lightbox](https://fooplugins.com/documentation/foobox/block-editor/foobox-wordpress-core-lightbox/) - [Opening Shortcodes and FooGallery in FooBox (Pro)](https://fooplugins.com/documentation/foobox/block-editor/foobox-shortcodes-foogallery/) **Need more help?** Browse all documentation or open a support ticket. [All docs](/documentation/) [Support](/support/) FooBox Pro can open normal Gutenberg content as an inline lightbox. Build the content in a Group block, hide that Group on the normal frontend, and point a Button at its HTML ID. Available in FooBox Pro ## See hidden block content in action FooBox Pro can open block-built inline HTML from a Button while keeping the source Group hidden in the normal page flow. [See the hidden HTML demo](/foobox/demos/#demo-hidden-html) [View FooBox pricing](/foobox/#pricing) This replaces the older workflow of writing a hidden `
` in a Custom HTML block. ## 1. Build the content in a Group Add a **Group** block and compose the lightbox content with any blocks that can render normally inside it, such as Image, Heading, Paragraph, List, Columns, or Shortcode. ![A Group containing a nature image, heading, and paragraph](https://fooplugins.com/wp-content/uploads/2026/07/24-hidden-group-content.webp)Keep interactive widgets and third-party blocks within the requirements of their own plugins. ## 2. Turn the Group into hidden FooBox content Select the outer Group and open **Block → Content → FooBox**. Enable **Use as hidden FooBox content**. Set a unique **HTML ID**, such as `nature-field-guide`, or click **Generate id**. Leave **Hide on front end** enabled when the Group should only appear in the lightbox. Set Width and Height for the inline content area. ![Hidden Group FooBox controls with an HTML ID and dimensions](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20440%20650'%3E%3C/svg%3E)The editor keeps the Group visible and adds a distinct outline so the hidden content remains editable. ![Hidden FooBox Group visibly outlined inside the editor](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20760%20720'%3E%3C/svg%3E)## 3. Create the trigger Button Add a Button and select the individual Button block. Enable FooBox, then set: - **Content type:** HTML content - **Lightbox URL or target:**`#` followed by the Group’s HTML ID For a Group with the ID `nature-field-guide`, the Button target must be `#nature-field-guide`. ![Button HTML content target matching the hidden Group ID](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201340%20600'%3E%3C/svg%3E)Set the Button’s dimensions to suit the Group content. Choose a style, theme, opening effect, and caption if required. ## 4. Preview the inline layout On the normal page, only the Button is visible. Clicking it opens the rendered Group inside FooBox. ![A block-built field guide opened as hidden HTML content in FooBox](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%201000'%3E%3C/svg%3E)## Important rules - Every hidden Group must have a unique HTML ID on the page. - The trigger must include the leading `#` in its target. - The Button content type must be **HTML content**. - Disabling **Hide on front end** shows the Group in the page as well as making it available to FooBox. - The hidden HTML content handler requires FooBox Pro. Free displays the editor controls so the content does not need to be rebuilt after an upgrade. ## Troubleshooting - **The Button does nothing:** compare the Group ID and Button target character for character. - **The page jumps to the Group:** confirm FooBox Pro is active and HTML content is selected. - **The hidden content appears in the page:** enable Hide on front end on the outer Group. - **Only one nested block is selected:** use List View or the editor breadcrumb to select the outer Group. Resources ## Find the right next step Use this grid for documentation indexes, support routes, account links, affiliate resources, and download pages. ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)### Documentation Search setup guides, product docs, and troubleshooting articles. [Browse docs](/documentation/) ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)### Support Open a ticket with product details so we can help quickly. [Get support](/support/) ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)### Licensing Review account, renewal, refund, and license information. [View details](/licensing/)