Collapsible page sections

Collapsible sections on the page can condense the content and only show what users want to see at a given time.

Here is an example:

Setting up

Follow these steps to add a collapsible section to your page:

  1. Pick a place on a page and add a new section from the choices shown below
    image

  2. Add any apps and content you want this section to have

  3. Edit the section and in the section properties set the section as [Collapsible] as shown below
    image

  4. Create as many sections as you need on the page

Advanced: Applying style to a collapsible section

By default, the collapsible section will look like this:

You can apply a style to it by following these steps:

  1. Above the first collapsible section add a new app called [Embed a Script or Code]
    image

  2. Click [Edit script or markup] and add the following content into the script window:

<style>
div[class^="headingContainer-"] {
background: #BAEEE0;
padding: 15px 25px;
border-radius: 50px;
margin: 0;
}

div[class^="headingContainer-"] h2 {
margin: 0;
margin-top: 5px;
}

div[class^="Collapsible root-"] {
background: #E5F8F3;
margin-bottom: 25px;
border-radius: 50px;
}

div[class^="Collapsible root-"] ul {
padding-bottom: 25px;
}
</style>
  1. Adjust colors as needed

  2. Save the markup editor and publish the page