Since Asciidoctor 2.0.0 we can add the collapsible option to an example block. When the markup is generated to HTML we get a HTML details and summary section. The content of the example block is collapsed (default behaviour because it is in a details section) and a clickable text is available to open the collapsed block (the summary section), so we can see the actual content. The text we can click on is by default Details, but we can change that by setting the title of the example block. Then the title is used as the text to click on to open the collapsed content.
The following example markup has two collapsible blocks with and without a title:
= Sample
:nofooter:
:source-highlighter: highlightjs
== Collapse
[%collapsible]
====
Example block turns into collapsible summary/details.
====
== Exercise
. Implement the `Application` class with `main(String[] args)` method.
=== Solution
// The title attribute is used as
// clickable text to open the example block.
.Click to see solution
[%collapsible]
====
[,java]
----
package mrhaki;
import io.micronaut.runtime.Micronaut;
public class Application {
public static void main(String[] args) {
Micronaut.run(Application.class);
}
}
----
====
When we generate this markup to HTML we get the following result:
And when we expand the collapsible content we see:
Written with Asciidoctor 2.0.2.
