---
title: Add an Accordion with Rich Content Editor
description: Add an accordion component to the canvas to design content that can be expanded or collapsed.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/australia/employee-service-management/employee-experience-foundation/ec-rich-content-editor-accordion.html
release: australia
product: Employee Experience Foundation
classification: employee-experience-foundation
topic_type: task
last_updated: "2026-03-12"
reading_time_minutes: 6
breadcrumb: [Microsites, Creating employee communications, Authoring and managing employee communications, Employee Center Pro, Unified Employee Experience, Employee Service Management]
---

# Add an Accordion with Rich Content Editor

Add an accordion component to the canvas to design content that can be expanded or collapsed.

## Before you begin

Role required: sn\_cd.content\_manager

Fill in the New content form fields. See [Create rich content](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/employee-experience-foundation/ec-content-library-portal-rich-content.md)

Create the page layout using modules or columns.

-   Modules are predefined content layouts comprised of header, paragraph text, and images. See [Add predefined content layouts with the Rich Content Editor](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/employee-experience-foundation/add-modules-rich-content-editor.md)
-   Columns are containers that enable you to define a custom layout. See [Add columns with the Rich Content Editor](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/employee-experience-foundation/ec-rich-content-canvas.md)

## Procedure

1.  Navigate to the canvas by selecting the **Open editor** button from the **Design** tab of the **New content** form.

2.  Drag and drop the accordion component into the canvas.

3.  Configure accordion component behavior and toggle/button design, and add more panels.
4.  Navigate to the **Settings** > **Properties** section to configure the accordion component:

<table id="table_qf1_vlw_cdc"><thead><tr><th>

Settings field

</th><th>

Description

</th></tr></thead><tbody><tr><td colspan="2">

Panel behavior

</td></tr><tr><td>

Expand first panel on load

</td><td>

Selecting this option loads the accordion with the content in the first panel visible.If you deselect this option, the accordion loads with all the panels closed.

</td></tr><tr><td>

Allow multiple panels to expand

</td><td>

Selecting this option allows employees to expand multiple panels at once.If you deselect this option, when an employee expands a panel, the currently expanded panel automatically closes.

</td></tr><tr><td colspan="2">

Button design

</td></tr><tr><td>

Style

</td><td>

Select the style of the accordion button, or toggle, that employees click to expand and close panels.

</td></tr><tr><td>

Size

</td><td>

Use the up and down arrows to adjust the size of the buttons.

</td></tr><tr><td>

Placement

</td><td>

Specify whether the buttons appear to the left or right of the accordion titles.

</td></tr><tr><td>

Color

</td><td>

Use the color picker \(checkered square\) to select a color or enter the color code that represents the color you want to appear.All HTML colors are supported. For more information, see [HTML color names](https://htmlcolorcodes.com/color-picker/).

</td></tr></tbody>
</table>5.  To add more panels to the accordion, click **Add item**, located in **Settings** &gt; **Properties**.

6.  Configure the accordion styling, such as background color or border. Click the outer component container \(Accordions\) to configure all the panels at once. To configure individual panels, click the respective containers.
7.  Navigate to the **Settings** panel to configure the following styling settings:

<table id="table_zx2_tgw_jyb"><thead><tr><th>

Settings field

</th><th>

Description

</th></tr></thead><tbody><tr><td colspan="2">

Styling

</td></tr><tr><td>

Background Color

</td><td>

Use the color picker \(checkered square\) to select a color or enter the color code that represents the background color you want to appear.All HTML colors are supported. For more information, see [HTML color names](https://htmlcolorcodes.com/color-picker/).

</td></tr><tr><td colspan="2">

Advanced styling

</td></tr><tr><td>

Width

</td><td>

Specify the value by entering a number or dragging the right side of the cell.Select the unit of measure:

-   px: pixel
-   %: percentage


</td></tr><tr><td>

Padding

</td><td>

Padding is the space between content and the border of an element. Specify the value for top, bottom, right, or left padding by entering a number.

</td></tr><tr><td>

Margin

</td><td>

Margin is the space between a row and another element/the canvas boundary. Specify the value for top, bottom, right, or left padding by entering a number.

</td></tr><tr><td>

Border

</td><td>

Edit the border around the outside of the button.**Note:** The border is the outline around the button.

 Width: Use the up and down arrows to adjust the width of the border. Just like the width and height, you can choose the unit of measure you prefer by selecting the single down arrow key to the left of the up and down arrows.

 Style: The format of the border around the button. Select the drop-down to select the type of border you want around the button.

 Color: The color of the border around your button. Select the color of your button using the color palette and slide bars similar to how you select your background color.

</td></tr><tr><td>

Border radius

</td><td>

Use the up and down arrows to adjust the radius of the border. Just like the width and height, you can choose the unit of measure you prefer by selecting the single down arrow key to the left of the up and down arrows.

</td></tr></tbody>
</table>8.  Format accordion title text.
9.  To format the accordion title text, click the **Accordion Title** container and navigate to the **Settings** &gt; **Styling** section.

<table id="table_pm1_w4w_cdc"><thead><tr><th>

Settings field

</th><th>

Description

</th></tr></thead><tbody><tr><td colspan="2">

Styling

</td></tr><tr><td>

Text style

</td><td>

Allows you to quickly change the look of your text by selecting a pre-formatted choice. You can select different headlines or paragraph styles.Headline 1-6 corresponds to h1 - h6 HTML tags.

</td></tr><tr><td>

Text color

</td><td>

Use this drop-down to change the color of your text. Your choices are:

-   Primary: The primary color defined by your portal theme.
-   Muted: The color defined by your portal theme.
-   White: Changes the color of your text to white. This is useful when using a background color other than white.
 Text color assigns predefined CSS classes for text color.

</td></tr><tr><td>

Display

</td><td>

Configure the appearance of multiple components within the same column, such as an image and a text component. Select from the following options:-   **Top and bottom** \(default\): Image appears above the other component.
-   **Side by side**: Image appears with the other component next to it.
**Note:** For best results, set the same display for the components. For example, if you have an image and text components in a column and want the image to appear on the left and the text to appear at the right, change the **Display** settings for both components to **Side by side**.

</td></tr><tr><td>

Align

</td><td>

Determines the horizontal alignment of your text. Choose from:-   Left justify
-   Center justify
-   Right justify
-   Justify \(text is aligned with both margins\)


</td></tr><tr><td colspan="2">

Advanced styling

</td></tr><tr><td>

Padding

</td><td>

Padding is the space between content and the border of an element. Specify the value for top, bottom, right, or left padding by entering a number.

</td></tr><tr><td>

Margin

</td><td>

Margin is the space between a row and another element/the canvas boundary. Specify the value for top, bottom, right, or left padding by entering a number.

</td></tr><tr><td>

Font name

</td><td>

Defines the font face used to render characters.Click the drop-down arrow to select a different font.

</td></tr><tr><td>

Font size

</td><td>

Sets the size of the font.

</td></tr><tr><td>

Font weight

</td><td>

Determines how bold or light your text appears.Click the drop-down arrow to select a different weight.

</td></tr><tr><td>

Line height

</td><td>

Sets the vertical distance between two lines of text.

</td></tr><tr><td>

Font color

</td><td>

Overrides the font color from your portal theme.To select a color, enter the hex code or click the color picker \(grey square to the right of the font color\) and select a color from the color palette.

</td></tr></tbody>
</table>10. Build out the accordion content by adding images, videos, text, or links to the panels.

11. Select **Save** or **Save and Finish**.

    Selecting **Save** saves your content and you remain on the **Rich Content Editor** canvas. Selecting **Save and Finish** saves your record and returns you to the **New content** form.


## What to do next

-   \(Optional\) Translate your content.

    Request language translation for your content. For more information, see [Multilingual support in the Content Library](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/employee-experience-foundation/ec-switch-language.md).

    **Note:** Only translate content after you are done modifying the content. For best results, we do not recommend that you add or remove components or change the formatting after translation.

    To create rich content that is formatted differently in different languages, duplicate the content and modify the formatting as needed. Then, use Audiences to target the content to users by language. See [Audiences](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/employee-experience-foundation/ecpro-audience.md)

-   Preview your content from the **Publish** tab.

    **Note:** Content Preview is designed to provide a general idea of how your content looks. Content may look different once published due to variations in device resolution, theme difference, or mobile app style configuration.

-   Configure a publish plan to control where the content is delivered, the audience, and the period of time it is available: [Create a publish plan for your content](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/employee-experience-foundation/ec-content-library-publish2.md).