---
description: How to add and style collapses.
---

# Collapses

## What is a Collapse?

A Collapse is used for showing and hiding content. Here's an example:

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FH2cOa277KI3AKVGVIU15%2FCollapseExample.gif?alt=media&#x26;token=4c5ffbbe-ac45-4cc7-83f7-725f1b8e4ad0" alt=""><figcaption><p>Example Collapse</p></figcaption></figure>

{% hint style="success" %}
**Location in the Parts Library:**   Base Parts > Data Display > Collapse



There are also collapse parts in **Page Sections**, including:

Page Sections > Services,

Page Sections > Text blocks,

Page Sections > Card rows,

Page Sections > Meet the team,

Page Sections > Testimonials, and

Page Sections > Stats.
{% endhint %}

## Adding and Formatting the Collapse <a href="#editing-and-formatting-the-card" id="editing-and-formatting-the-card"></a>

Choose your preferred collapse from the Parts Library, select the part where you’d like to add your collapse, and click ‘**+ add to page**’.

The collapse (parent) houses two key parts (children):&#x20;

* The collapse title - the visible part containing your title, which can also include other parts&#x20;
* Collapse content - the content area that is revealed when the collapse is opened.

## Editing the Collapse Part&#x20;

Like many other parts, [size](../../customising-and-formatting/sizing), [borders](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/borders), [shadow](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/shadow), [opacity](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/opacity), [colors](../../customising-and-formatting/colors-and-themes), [color gradients](../../customising-and-formatting/color-gradients), and [spacing](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/spacing) can be applied using the property editor on the right, once the collapse has been selected.&#x20;

### Shape of the Icon to Open and Close the Collapse

Collpases can be opened and closed using either a dropdown arrow or a 'plus' icon. These are found in the property editor in the right menu under 'Shape'.

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2F3renPyobN8X9oCNZ0rdg%2FCollapseShape.png?alt=media&#x26;token=818b04d2-3b2f-4fc2-9002-69219b750306" alt=""><figcaption><p>Shape of Open and Close Icons</p></figcaption></figure>

### **Rounding** <a href="#rounding" id="rounding"></a>

Collapse parts are naturally [rounded](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/rounding).

Collapses can be given a hard edge or have the level of rounding changed using the Decoration Editor, in the 'Rounding' tab.

Rounding can be applied to all of the collapse, the top left, top right, bottom left, and bottom right, or a combination of these. There are various degrees of rounding ranging from none to full, with incremental size points in between.

To remove all rounding from a collapse, giving it a hard edge, choose rounding of 'none'.

In the rounding editor, when 'full' is applied to 'all' of the collapse, the collapse will have a pill shape.

### Applying a Background Image to the Collapse

Applying an [image to the background](../../customising-and-formatting/background-images) of the collapse is easy - just select the collapse, then go to Image in the property editor on the right. Open up the image property editor, and select your image from the Media Gallery, or upload an image from your device.&#x20;

You can then adjust the image [opacity](../../customising-and-formatting/opacity) using the Decoration Editor in the property editor, by accessing the 'Image Opacity' tab.

## Editing the Contents of the Collapse

To edit the title of the collapse, select it to activate the property editing panel on the right.&#x20;

To edit the [text](../../frequently-used-parts/text), go to Text > Value set, and replace the text with your own.&#x20;

If there is an [icon](../../frequently-used-parts/icons) in the title, select the icon, then go to Icon > Value set, and replace the icon with your preferred icon. Format the icon as needed.

To edit the text within the content area that is hidden, use 'Command+Click' (Mac) or 'Control+Click' (Windows) on the arrow to open the contents. That will open the content area, and you can go ahead and edit the text, or add any other content you'd like to the area. For example, you can add rows, columns, cards, images, buttons, you name it!&#x20;

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2F8sxk33UeKdpQdzspUNgb%2FCollapseEdit.gif?alt=media&#x26;token=299f243c-b847-4c20-989f-9be21511c32e" alt=""><figcaption><p>Editing the Title and Content of a Collapse</p></figcaption></figure>



## Related Information <a href="#related-information" id="related-information"></a>

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:orange;">Hierarchy: parents and children</mark></td><td></td><td></td><td><a href="../../getting-started/hierarchy-parents-and-children">hierarchy-parents-and-children</a></td></tr><tr><td><mark style="color:orange;">Accordions</mark></td><td></td><td></td><td><a href="accordions">accordions</a></td></tr><tr><td><mark style="color:orange;">Icons</mark></td><td></td><td></td><td><a href="../../frequently-used-parts/icons">icons</a></td></tr><tr><td><mark style="color:orange;">Text</mark></td><td></td><td></td><td><a href="../../frequently-used-parts/text">text</a></td></tr><tr><td><mark style="color:orange;">Customizing and formatting</mark></td><td></td><td></td><td><a href="../../customising-and-formatting">customising-and-formatting</a></td></tr></tbody></table>
