# collapse.html
> learn how to use the collapse shortcode
The {{<collapse>}} shortcode is a simple way to create collapsible sections in your documentation. This is great for hiding large amounts of content that you don’t want to overwhelm your readers with.
How it works # The {{<collapse>}} shortcode accepts 2 named args: title and description.
title is the title of the collapsible section. description is the content that will be hidden until the user clicks on the title. Examples # {{<collapse>}}
Expand this is the hidden content. {{<collapse title="Click me" description="I'm hidden content!">}}
Click meI'm hidden content!
this is the hidden content. Source code # go {{- $title := .Get "title" | default "Expand" -}} {{- $description := .Get "description" -}} {{- $variant := .Get "variant" | default "default" -}} {{- $id := .Get "id" | default (printf "collapse-%s-%d" (md5 .Inner) (now.UnixNano)) -}} {{- if ne hugo.Environment "pdf" -}} <section class="collapse{{ if ne $variant "default" }} collapse--{{ $variant }}{{ end }}" id="{{ $id }}" data-collapse-state="collapsed" data-component-state="ready"> <div class="collapse__header" role="button" tabindex="0" aria-expanded="false" aria-controls="{{ $id }}-body" data-target="{{ $id }}-body"> <div class="collapse__icon-wrapper"> <svg class="collapse__icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /> </svg> </div> <div class="collapse__content-wrapper"> {{- with $title -}} <h3 class="collapse__title">{{ . }}</h3> {{- end -}} {{- with $description -}} <p class="collapse__description">{{ . }}</p> {{- end -}} </div> </div> <div class="collapse__body" id="{{ $id }}-body" role="region" aria-labelledby="{{ $id }}-header"> <div class="collapse__body-content"> {{ .Inner | markdownify }} </div> </div> </section> {{/* Inline JS removed. Collapse handled by Collapse components. */}} {{- else -}} {{/* PDF fallback - just show content */}} {{- with $title -}} <h4>{{ . }}</h4> {{- end -}} {{ .Inner | markdownify }} {{- end -}} 

## Metadata

- **Section**: features
- **Type**: features
- **Author**: Lawrence Lane
- **Parent**: [collapse.html](/features/shortcodes/index.txt)

## Navigation
- **Current Section**: [collapse.html](/features/shortcodes/index.txt)