Collapsible Sections: Hide and Reveal Content in Your Posts

The Roq default theme now includes styled collapsible sections using the standard HTML <details> and <summary> elements. They work in both Markdown and AsciiDoc content, with a pill-shaped toggle that expands on open, an animated arrow, and a fade-in effect.

In Markdown

Use standard HTML <details> and <summary> tags directly in your .md files:

<details>
<summary>Click to reveal</summary>

Your hidden content here. **Markdown formatting** works inside.

</details>

Here is how it looks:

Click to reveal

Your hidden content here. Markdown formatting works inside.

Tutorial hints and solutions

Collapsible sections are a great fit for tutorials where you want to give readers a chance to try on their own before revealing the answer:

Hint

Use the @Path and @GET annotations on a resource class. Return a plain String.

Solution

@Path("/hello")
public class GreetingResource {

    @GET
    @Produces(MediaType.TEXT_PLAIN)
    public String hello() {
        return "Hello from Roq!";
    }
}

Step-by-step instructions

Multiple consecutive collapsible sections stack with a small gap between them:

Step 1: Create the project

quarkus create app my-app

Step 2: Add an extension

quarkus ext add rest-jackson

Step 3: Start dev mode

quarkus dev

Open http://localhost:8080/hello to see your endpoint.

In AsciiDoc

AsciiDoc content has its own collapsible styling using the %collapsible option on an example block:

.Click to expand
[%collapsible]
====
Hidden content here.
====

Add the .result role for a distinct output/result look:

.Show result
[%collapsible.result]
====
Result content with a background.
====

Both Markdown and AsciiDoc collapsible sections are styled by the default theme with no extra configuration needed.

See them in action on the Markdown markup test and AsciiDoc markup test pages.