# 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](structural-elements.html#chapter-block), [procedures](structural-elements.html#procedure-block), [code blocks](code.html#code-blocks), and [definition list items](lists.html#definition_lists). Set `collapsible="true"` on an element to render it collapsed by default with the  icon that expands the content inside this element.
> **Note:**
> Readers will not be able to find anything in collapsed content via the browser search with `Ctrl+F` (Windows), `⌘ F` (macOS), `⌘ F` (IntelliJ IDEA Classic (macOS)), `⌘ F` (macOS System Shortcuts), `Ctrl+F` (XWin), `Ctrl+F` (GNOME), `Ctrl+F` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+F` (Sublime Text), `⌘ F` (Sublime Text (macOS)), `Ctrl+F` (NetBeans), `Ctrl+F` (Visual Studio), `⌘ F` (Visual Studio (macOS)), `Ctrl+F` (Eclipse), `Ctrl+F` (Eclipse (macOS)) on the web page, so do not collapse important information.
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.
Chapters:
Semantic markup example:
```XML
Some content.
```
Markdown example:
```PLAINTEXT
## Some chapter {collapsible="true"}
Some content.
```
How it will render:
## Some chapter
Some content.
Procedures:
Semantic markup example:
```XML
Do this
Do that
```
How it will render:
Procedure: Some procedure
1. Do this
2. Do that
Code blocks:
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:
```XML
class Person(val name: String) {
val children: MutableList = mutableListOf()
constructor(name: String, parent: Person) : this(name) {
parent.children.add(this)
}
}
```
Markdown example:
```PLAINTEXT
```kotlin
class Person(val name: String) {
val children: MutableList = mutableListOf()
constructor(name: String, parent: Person) : this(name) {
parent.children.add(this)
}
}
```
{collapsible="true" collapsed-title="Person.kt"}
```
How it will render:
```KOTLIN
class Person(val name: String) {
val children: MutableList = mutableListOf()
constructor(name: String, parent: Person) : this(name) {
parent.children.add(this)
}
}
```
Definition lists:
Besides making the whole definition list collapsible, you can set the default state for every item individually.
Semantic markup example:
```XML
This is the definition of the first term.
This is the definition of the second term.
```
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.