# Accordion section
The Accordion block is a convenient graphical solution for a website in the form of a list of text notes with drop-down elements:
"Accordion" is easy enough to embed on a website and customize to your own needs: it can perfectly fit any necessary requests.
## How to add and configure “Accordion”?
To add an item to your site, go to the site settings and click plus to open the menu with the sections available in the Salebot.
Then, in the section menu that opens, find the "Accordion" block.
Next, you will see an empty added block, in which you need to configure the content in the form of cards and the type of the accordion cards themselves:
## Content settings
At first, we will add content cards, for which you need to click on the "Content" button, and then add the card itself, which will contain the title and, accordingly, the text:
An empty card was added to your content, where you can add a question text, an image, and an answer text:
The text element of the block has settings similar to those of any text editor: settings for boldness, italics, underscores, font height and font outline, color, and more.
To apply its settings to a text, select the required part of the text and select text settings
Next, upload an image, if necessary, and add a clarifying text - the answer to the question:
You can add the required number of content cards.
## Customization of content
After adding the required number of content cards, go to the content settings:
Next, you can select a checkbox so that the first accordion card or only one of the cards is open.
Select the vertical margin setting between the questions in the block:
You can also round the corners of the cards using this field, which accepts only numeric values:
The text element (as well as the button) in the card is always in the middle relative to the top and bottom edges. To select the required distance, enter a numeric value in the "Internal padding at the top and bottom" field:
Also, the entire content of the card (including the text and the button for expanding the response text) is located in the middle relative to the right and left edges. To adjust the padding on the left and right, use the "Internal padding on the left and right" field:
To select the size of the icon that opens the response text, just use this Icon “Width field”, which also takes an exclusively numeric value:
If the image inside the card is too large, you can select its width by specifying the required value in the "Image width" field:
Next, select a color palette for each element of your accordion: text, card background, icon, etc.:
Now you know how to install the "Accordion" block on your website and customize the content inside the block.
## Customization of the block (section): font, background, and display settings
To customize “Accordion” block, you will need universal section settings (blocks), which include font, background, and display settings.
The settings of the section (block), namely fonts, background and display are the same for all blocks.
{% hint style="info" %}
[Read more about the universal settings of the sections (blocks) of the site in the article](/websites/sites/blocks/settings.md)
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.mavibot.ai/websites/sites/blocks/accordion.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
