> ## Documentation Index
> Fetch the complete documentation index at: https://developers.kajabi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add an accordion block to a page

> Learn to add Accordion Blocks to your pages built with Kajabi to organize content on your Page.

This guide refers to the latest page template available with the Website Builder and Kajabi Pages. If you are using the Premier Legacy Templates, please refer to the guide [here](../../website/pages/how-to-add-an-accordion-section-to-your-premier-page).

***

## What is an accordion block?

An Accordion Block displays content in a collapsible dropdown format. Each accordion has a Heading that is always visible and a Body that expands when clicked, making it useful for FAQs, instructions, or any content that benefits from being shown on demand.

The Accordion Block behaves as a dropdown bar with a Heading Text identifying the Block. When a user clicks open the Accordion Block on your Page, they can view the Body Text:

<img src="https://mintcdn.com/kajabi-support/ozJszuNKO84dmc_i/articles/images/444f5f17_42469683460251.png?s=dfcb4a47745b2a20513f035218520433" alt="openingaccordionblock.gif" width="1920" height="1080" data-path="articles/images/444f5f17_42469683460251.png" />

***

## Adding an accordion block

1. From the Dashboard, click **Website.**
2. Click **Landing** **Pages**.
3. Open the page editor for your Page. [Learn more](../../website/pages/how-to-get-to-the-page-editor)
4. Click the Section you want to edit or [Add section.](../../website/pages/add-sections-to-your-pages).
5. In the sidebar, click **Add Content**.
6. From the list, select the options from the **FAQS** section (formerly accordion). Select **Add.**
7. The accordion block will appear at the bottom of the section as a stack or grid.
8. Click **Save**

<Frame>
  <img src="https://mintcdn.com/kajabi-support/bGyBRcS-qGk0DuXK/images/accordianfaq.jpg?fit=max&auto=format&n=bGyBRcS-qGk0DuXK&q=85&s=47557dd8cbddb8e91f9a98e4fb3b5387" alt="Accordianfaq" width="4020" height="2056" data-path="images/accordianfaq.jpg" />
</Frame>

<Tip>
  **Tip:** To include additional accordion blocks in the Section, simply click **+ Add Content** in the Section editor and repeat the steps for adding the Accordion Block. To format your blocks in a Grid, we recommend adding an [FAQ Grid Section](../../website/pages/how-to-add-an-faq-section).
</Tip>

***

## Customizing an accordion block

In an Accordion Block, configure the [Width](../../website/pages/how-to-customize-the-block-width) of the Block, Heading text, Body text, and your Block Settings:

<img src="https://mintcdn.com/kajabi-support/Y0-wARx9yh8Sk6QV/articles/images/ae5053d3_17017990750875.png?fit=max&auto=format&n=Y0-wARx9yh8Sk6QV&q=85&s=27cd820879cf78bf2b2009774ee4470e" alt="14ADE06C-C1AA-4FE6-8BBC-5F2C325CADE1.png" width="1920" height="1080" data-path="articles/images/ae5053d3_17017990750875.png" />

<Note>
  **Note:** The font size and style of the accordion Heading and Body text are controlled by your site's Style Guide settings, not within the Accordion Block itself. To change how the text appears, update the **Fonts** and **Font Colors** settings in your Style Guide. [Learn how to customize your Style Guide](https://help.kajabi.com/articles/website/pages/customize-your-page-font-and-style-with-the-style-guide).
</Note>

<Tip>
  **Tip:** [Utilize the Body Text Editor](https://help.kajabi.com/articles/marketing/email-campaigns/can-i-make-the-text-box-larger-when-editing) to easily add your text content to your Accordion Block.
</Tip>

***

## Block settings

To adjust the look and feel of the Block, configure your Block Settings by customizing the:

* **Icon:** Change the Icon Style to a Plus or an Arrow and select an Icon Color to fit your brand
* **Background**: Customize the block background color or image. [**\[Learn more\]**](https://help.kajabi.com/articles/website/pages/customizing-block-background-settings)
* **Desktop and Mobile Layout**: Adjust how the block displays on different screen sizes. [**\[Learn more\]**](https://help.kajabi.com/articles/website/pages/customizing-block-layout-settings)
* **Animations**: Add entrance animations to the block. [**\[Learn more\]**](https://help.kajabi.com/articles/website/pages/customizing-block-animations)
* **Time Reveal**: Set a delay for when the block becomes visible on the page. [**\[Learn more\]**](https://help.kajabi.com/articles/website/pages/customizing-time-reveal-settings)

**Accessing your Accordion Block Settings:**

1. From the Dashboard, click **Website.**
2. Click **Pages**.
3. Open the page editor for your Page. [Learn more](../../website/pages/how-to-get-to-the-page-editor)
4. Hover over the Accordion Block you want to customize and click **Edit**.
5. In the sidebar, scroll down to **Block Settings** to customize the options listed above.

<img src="https://mintcdn.com/kajabi-support/NHosPLWrdBkWec8r/articles/images/1b270e04_17018063430299.png?fit=max&auto=format&n=NHosPLWrdBkWec8r&q=85&s=af6a64dd835a5898eacba36e358cdc0c" alt="36DCB17A-C28A-4962-AF34-A0A4AA533AC9.png" width="1920" height="1080" data-path="articles/images/1b270e04_17018063430299.png" />
