The Details block provides a summary that visitors can expand to reveal supporting content. It works well for optional explanations or a short set of questions, but essential instructions should remain easy to find without opening many hidden sections.
IN THIS ARTICLE
01 Choose what belongs inside
Write a summary that clearly describes the hidden material, such as Delivery coverage or How to prepare your files. Avoid vague labels like More. Keep related details together and do not use a long sequence of collapsed blocks as a substitute for a clear page structure.
If the information is necessary before a purchase or destructive action, present it visibly near that action. Collapsing it can make an important condition easy to miss.
02 Create the expandable section
- Insert a Details block at the appropriate point in the page.
- Enter the summary text and add suitable content blocks inside the expanded area.
- Choose whether it should initially be open using the available setting. Make this decision based on the importance and length of the content.
- Style the section consistently with nearby text while keeping the summary's interactive nature clear.
- Save and preview the page in both the open and closed states.
03 Verify interaction
Test with a keyboard as well as a pointer. Confirm that the summary can receive focus and that the content expands and collapses predictably. Check long answers, links and images at a narrow width.
Keep the summary itself simple. Place other links or buttons inside the revealed content rather than creating competing interactive controls in the trigger text. Use clear headings inside long content so readers can scan it after expansion.
What if the Details block does not open correctly?
If the content never opens, test whether custom theme scripts or styles are interfering with the native behaviour. Compare with a simple Details block on a draft page before installing another accordion plugin.
If the block appears empty, use List View to verify that its inner blocks are actually nested inside it. Review the public page after caching is cleared. When replacing an older accordion plugin, migrate the content carefully and test any existing direct links to the old sections before deleting the original component.