Collapsible Blocks

You can designate block content to be revealed or hidden on interaction using the collapsible option and its companion, the open option. When the AsciiDoc source is converted to HTML, this block gets mapped to a disclosure summary element (i.e., a summary/details pair). If the output format does not support this interaction, it may be rendered as an unstyled block (akin to an open block).

Collapsible block syntax

You make block content collapsible by specifying the collapsible option on the example structural container. This option changes the block from an example block to a collapsible block.

Example 1. Collapsible block syntax
[%collapsible]
====
This content is only revealed when the user clicks the block title.
====

In the output, the content of this block is hidden until the reader clicks the default title, “Details”. The result of Example 1 is displayed below.

Details

This content is only revealed when the user clicks the block title.

Like other blocks, the collapsible block recognizes the id and role attributes.

Collapsible paragraph syntax

If the content of the block is only a single paragraph, you can use the example paragraph style instead of the example structural container to make a collapsible paragraph.

Example 2. Collapsible paragraph syntax
[example%collapsible]
This content is only revealed when the user clicks the block title.

In the output, the content of this block is hidden until the reader clicks the default title, “Details”. The result of Example 2 is displayed below.

Details
This content is only revealed when the user clicks the block title.

Customize the toggle text

If you want to customize the text that toggles the display of the collapsible content, specify a title on the block or paragraph.

Example 3. Collapsible block with custom title
.Click to reveal the answer
[%collapsible]
====
This is the answer.
====

The result of Example 3 is displayed below.

Click to reveal the answer

This is the answer.

Notice that even though this block has a title, it’s not numbered and does not have a caption prefix. That’s because it’s not an example block and thus does not get a numbered caption prefix like an example block would.

Default to open

If you want the collapsible block to be open by default, specify the open option as well.

Example 4. Collapsible block that defaults to open
.Too much detail? Click here.
[%collapsible%open]
====
This content is revealed by default.

If it's taking up too much space, the reader can hide it.
====

The result of Example 4 is displayed below.

Too much detail? Click here.

This content is revealed by default.

If it’s taking up too much space, the reader can hide it.

Use as an enclosure

Much like the open block, the collapsible block is an enclosure. If you want to make other types of blocks collapsible, such as an listing block, you can nest the block inside the collapsible block.

Example 5. Collapsible block that encloses a literal block
.Show stacktrace
[%collapsible]
====
....
Error: Content repository not found (url: https://git.example.org/repo.git)
    at transformGitCloneError
    at git.clone.then.then.catch
Caused by: HttpError: HTTP Error: 401 HTTP Basic: Access Denied
    at GitCredentialManagerStore.rejected
    at fill.then
....
====

The result of Example 5 is displayed below.

Show stacktrace 
Error: Content repository not found (url: https://git.example.org/repo.git)
    at transformGitCloneError
    at git.clone.then.then.catch
Caused by: HttpError: HTTP Error: 401 HTTP Basic: Access Denied
    at GitCredentialManagerStore.rejected
    at fill.then

Since the toggle text acts as the block title, you may decide to not put a title on the nested block, as in this example.