{"id":16358117,"date":"2023-08-08T10:00:00","date_gmt":"2023-08-08T10:00:00","guid":{"rendered":"https:\/\/wordpress.org\/documentation\/?post_type=helphub_article&p=16358117"},"modified":"2026-05-25T13:15:36","modified_gmt":"2026-05-25T13:15:36","slug":"details-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/details-block\/","title":{"rendered":"Details block"},"content":{"rendered":"\n

Go to the list of Blocks<\/a><\/p>\n\n\n\n

The Details block displays a text summary and an arrow button: When you click on the text or the button, the block opens and reveals additional content on the page.<\/p>\n\n\n\n

This block provides a way to show or hide content on your site. This can be useful on faq pages, showing \/hiding detailed event information etc.<\/p>\n\n\n\n

The <\/strong>Summary is customizable by selecting the “Write summary…” placeholder text and adding your own text. By default, the block uses the summary content as its label, similar to how the Heading block works.<\/p>\n\n\n\n

The additional content blocks that you place inside the Details block that are hidden until you click on the summary text or the button. Because the content is hidden until you open the block, it is referred to as “hidden content”.<\/p>\n\n\n\n

\"The<\/figure>\n\n\n\n

Open state:<\/strong><\/p>\n\n\n\n

\"The<\/figure>\n\n\n\n

Add a Details block<\/h2>\n\n\n\n

To add a Details block, click on the Block Inserter<\/strong> (+)  and select the Details block.
You can also type \/details<\/kbd> and hit enter<\/kbd> in a new paragraph block to add one quickly.<\/p>\n\n\n\n

\"Using
Using the slash inserter<\/figcaption><\/figure>\n\n\n\n

Block toolbar<\/h2>\n\n\n\n

Every block comes with unique toolbar icons and block-specific user controls that allow you to manipulate the block right in the editor.<\/p>\n\n\n\n

The Details block shows five buttons in the block toolbar:<\/p>\n\n\n\n