Collapsible blocks

In Writerside you can make pieces of content collapsible using the collapsible="true" attribute.

These blocks are rendered with the icon that collapses or expands the content inside this element.

You can add the collapsible attribute to a chapter, a procedure, a code block, or a definition list.

You can also define the default state for the collapsible element with the default-state attribute, which defaults to collapsed. You can set it to expanded when a large block of content is important, but you want users to be able to collapse it if it is irrelevant for them.

Chapter

Chapter's title

Some content.

                    
                <chapter title="Chapter's title" collapsible="true">
                    <p>Some content.</p>
                </chapter>

                    
                    ## Chapter's title {collapsible="true"}

                    Some content.

Procedure

Procedure's title

Step 1.
Step 2.

                
                <procedure title="Procedure's title" collapsible="true">
                    <step>Step 1.</step>
                    <step>Step 2.</step>
                </procedure>

Code block

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

                
                <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>
                
            

                
                ```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"}
            

Definition list

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

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

                {collapsible="true"}
                Expanded by default
                {collapsible="true" default-state="expanded"}
                : This is the definition of the first term.

                Collapsed by default
                {collapsible="true" default-state="collapsed"}
                : This is the definition of the second term.
            

Last modified: 20 November 2023