Collapsible elements

Collapse pieces of content to hide information that is not essential for most of your readers, such as additional reference information that supports the main content.

Writerside enables you to collapse the following elements: chapters, procedures, code blocks, and definition list items. Set collapsible="true" on an element to render it collapsed by default with the icon that expands the content inside this element.

You can change the default state for collapsible blocks by setting default-state="expanded" on a collapsible element. Do this when you want readers to be able to collapse information that is otherwise important.

Semantic markup example:

                <chapter title="Some chapter" id="some_chapter" collapsible="true">
                    <p>Some content.</p>
                </chapter>
            

Markdown example:

                ## Some chapter {collapsible="true"}

                Some content.

How it will render:

Some chapter

Some content.

Semantic markup example:

                <procedure title="Some procedure" id="some_procedure" collapsible="true">
                    <step>Do this</step>
                    <step>Do that</step>
                </procedure>
            

How it will render:

Some procedure

Do this
Do that

By default, collapsible code blocks render the first line in collapsed state, but you can set a different collapsed state using the collapsed-title attribute.

Semantic markup example:

                    <code-block lang="kotlin" collapsible="true" collapsed-title="Person.kt">
                        class Person(val name: String) {
                            val children: MutableList<Person> = mutableListOf()

                            constructor(name: String, parent: Person) : this(name) {
                                parent.children.add(this)
                            }
                        }
                    </code-block>
                

Markdown example:

                ```kotlin
                    class Person(val name: String) {
                        val children: MutableList<Person> = mutableListOf()

                        constructor(name: String, parent: Person) : this(name) {
                            parent.children.add(this)
                        }
                    }
                ```
                {collapsible="true" collapsed-title="Person.kt"}
            

How it will render:

class Person(val name: String) { val children: MutableList<Person> = mutableListOf() constructor(name: String, parent: Person) : this(name) { parent.children.add(this) } }

Besides making the whole definition list collapsible, you can set the default state for every item individually.

Semantic markup example:

                <deflist collapsible="true">
                    <def title="Expanded by default" default-state="expanded">
                        This is the definition of the first term.
                    </def>
                    <def title="Collapsed by default" default-state="collapsed">
                        This is the definition of the second term.
                    </def>
                </deflist>
            

How it will render:

Expanded by default: This is the definition of the first term.
Collapsed by default: This is the definition of the second term.

Last modified: 02 May 2024