---
title: "Accordion block"
description: "A disclosure panel with a title and a fragment editor body."
requested_language: hu
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/hu/payload/blocks/accordion
version: unreleased (main)
docs_index: https://docs.systhema.app/hu/llms.txt
---
> This page isn't translated yet. Showing English.


The Accordion block renders one disclosure panel with a title and a `fragment` editor body. Place several Accordion blocks together for a list of panels.

![The accordion block fields in the Payload editor](./images/accordion.light.webp)

## Where it is offered

Offered in the `root` and `region` tiers. Each panel's body uses the `fragment` editor.

## Fields

<!-- generated:block-fields accordion -->

| Field     | Type       | Label   | Default   | Notes                                  |
| --------- | ---------- | ------- | --------- | -------------------------------------- |
| `content` | `richText` | Content |           |                                        |
| `title`   | `text`     | Title   |           | Required                               |
| `variant` | `radio`    | Variant | `default` | Required; Options: `default` (Default) |

<!-- /generated -->

## Rendered output

Renders the [Accordion component](https://docs.systhema.app/hu/components/accordion.md) with `AccordionTitle` and `AccordionContent`.

## Converter

`accordionConverter` renders one `<Accordion>` with its title and converted fragment body. Add another Accordion block for each additional disclosure panel.

## Customizing

Import `AccordionBlock` from `@systhemaui/payload/blocks` as the starting schema for a project block. Register the definition and your renderer through `customBlocks`, using `type: 'block'` and the editor tiers you intend to support. A distinct slug creates a new block; a converter registered under the existing `accordion` slug takes precedence over the built-in converter. Keep the fields that renderer reads, including populated relationships and nested editor states.

See [Registering blocks](https://docs.systhema.app/hu/payload/blocks.md#registering-blocks) for the configuration pattern and [Converters](https://docs.systhema.app/hu/payload/custom-blocks/converters.md) for the renderer contract. A project converter used in client-mode live preview also needs [browser registration](https://docs.systhema.app/hu/payload/frontend/live-preview/client-mode.md).

## Related

- [Accordion component](https://docs.systhema.app/hu/components/accordion.md)