> For the complete documentation index, see [llms.txt](https://dev.xena.biz/xena-developer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dev.xena.biz/xena-developer/user-interface/styleguide/collapsible.md).

# Collapsible

Collapsible content is often found in tables. By expanding or collapsing an element the user has easy access to additional information without leaving the current view.

### Using icons

An icon is often used on the button to expand or collapse an element. The icon should point in the direction of the action; it should not illustrate the current state. E.g. if you were to swap the icon with text it should say "Expand" when collapsed and "Collapse" when expanded.

| :no\_entry\_sign: Don't                                             | :heavy\_check\_mark:  Do                                            |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- |
| <img src="/files/-M8PzHo5Dr2rhEEte_0V" alt="" data-size="original"> | <img src="/files/-M8Q--01T-rbabzoLsn7" alt="" data-size="original"> |
| The icon points in the wrong direction of what will happen.         | The icon illustrates what will happen when clicking on it.          |

If a large number of lines are expandable, you can provide a button to expand/collapse all items at once.