Collapse

Overview

A collapse is a component that can be expanded to show additional content. This is useful for showing long lists of value props.

A collapse has a header, which can be styled differently based on whether the collapse is open or closed.

A collapse also has a body which can contain a number of components.

Support

Adding a Collapse

1. Open or create a new Creator-compatible page

2. Click the plus button next to the Content Section or the component inside Content where you want the collapse.

3. Select 'Collapse'

   
4. Edit Collapse Header Title Text under Collapse > Collapse Header. Change the Content if desired.

   
5. Change styling of Collapse (see below for additional steps)

6. Add content to the Collapse Body. We recommend adding lists or text only. You can drag in existing components on the page, as long as they are supported inside the Collapse. See questions below for more details.

   

Styling: Collapse with colored rounded border

1. Edit the Collapse component

2. Change Border Color

3. Set Border Width to at least 1

4. Change Corner Radius of Collapse component

   
5. Edit the Collapse Header. Change Corner Radius to the same value.

6. Edit the Collapse Body. Change Corner Radius to the same value.

   

Styling: Collapse with transparent background color and colored border

1. Edit the Collapse component

2. Change Border Color

3. Set Border Width to at least 1

   
4. Edit the Collapse Header. Change Fill color to Transparent

   
5. Edit the Collapse Body. Change Fill color to Transparent

   

Styling: Change the Collapse Header icons

1. Find the Collapse Header icon component inside Collapse > Collapse Header

   
2. The icon under Appearance is the icon used when the Collapse is closed. Select a new icon from the library.

   
3. Click the 'Conditions' tab

4. Under the 'When Collapse is Open' condition, select a new icon from the library

   

Analytics

The Nami SDK emits analytics events about the Collapse component that you can consume for your own reporting purposes.

See 3rd-Party Analytics for background information.

List of Events

• collapsible_drawer_open

• collapsible_drawer_close

Frequently Asked Questions

Q: What Components can I put inside a Collapse?

A: All components except for Repeating Product Group, Product Group Toggle, Video and Carousel are supported inside a Collapse

Q: Where can I put a Collapse?

A: Collapse components can only go inside the Content section. They cannot be put inside a Carousel.

Q: How many Collapse components can I have on my page?

A: The page supports multiple Collapse components!

Q: When the page is Launched, will the Collapse be open or closed?

A: By default, all collapse components will be closed when the page is launched.