Adding an accordion
An accordion is an interactive element on your website that allows you to create lists with text that expands when you click on a check mark or plus sign. This allows you to efficiently display a lot of text on your website while reducing the visual volume of the page.
Tip: Accordion is convenient for creating FAQs or other lists where you need to display the headings of items with the ability to expand the rest of the text.
Hover over the block and click on the "+" where you want to add an accordion element and select it from the list:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/en-1-cropped_ad7cok.png)
Adjust the accordion by clicking on the Accordion settings icon:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/en-2_ugkyzc.png)
In the Style tab, you can make the following settings:
① Control Types - allows you to select the icon for expanding the list (plus sign or check mark);
② Decorators - allows you to enable or disable the display of a dividing bar between the items in your list;
③ Controls alignment - allows you to choose which side the icon for expanding will be displayed on;
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/en-3_dl2pj9.png)
You can also change the background of your list items if you want. To do this go to the Presets tab, after which you will be able to select the coloring scheme and change the colors to those you like :
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/en-4_17vbr0i.png)
Don't forget to publish your site to apply all changes.
Tip: Accordion is convenient for creating FAQs or other lists where you need to display the headings of items with the ability to expand the rest of the text.
Adding and customizing an accordion
Hover over the block and click on the "+" where you want to add an accordion element and select it from the list:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/en-1-cropped_ad7cok.png)
Adjust the accordion by clicking on the Accordion settings icon:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/en-2_ugkyzc.png)
In the Style tab, you can make the following settings:
① Control Types - allows you to select the icon for expanding the list (plus sign or check mark);
② Decorators - allows you to enable or disable the display of a dividing bar between the items in your list;
③ Controls alignment - allows you to choose which side the icon for expanding will be displayed on;
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/en-3_dl2pj9.png)
You can also change the background of your list items if you want. To do this go to the Presets tab, after which you will be able to select the coloring scheme and change the colors to those you like :
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/en-4_17vbr0i.png)
Don't forget to publish your site to apply all changes.
Updated on: 06/07/2024
Thank you!