--- title: How to use the Accordion widget? description: Use the Accordion widget to display information in expandable sections for better readability --- [Skip to content](https://success.ministrydesigns.help/how-to-use-the-accordion-widget#main-content) English Show submenu for translations [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) [![MD Logo 1\_Black-2](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-2.png?width=200&height=73&name=MD%20Logo%201_Black-2.png)](https://ministrydesigns.com/) Open main navigation Close main navigation - English Show submenu for translations - [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) How can we help you? - There are no suggestions because the search field is empty. 1. [Ministry Designs Success Hub](https://success.ministrydesigns.help/) 2. [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega) 3. [Pages](https://success.ministrydesigns.help/sites-formerly-omega#pages) # How to use the Accordion widget? ## Organize content with collapsible sections 1\. An accordion is a widget that allows users to expand and collapse sections of content, making the page less cluttered and easier to navigate. It is most frequently used in the FAQ sections on the site. To use an accordion widget, drag and drop it onto the page. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/0cda1ab1-5d73-43b5-82f7-cf6c857956b5/ascreenshot.jpeg?tl_px=0,195&br_px=859,676&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=107,212) 2\. Left-click the Accordion widget to edit the Settings described in Step 3 and further ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/cca252e3-5ec0-4b66-a7eb-1e28a3b7bc8b/ascreenshot.jpeg?tl_px=975,251&br_px=1835,732&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) 3\. Click "Add" to add an Accordion item ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/a242c4f5-add8-4896-a1a8-a2b40adb30db/ascreenshot.jpeg?tl_px=1060,83&br_px=1920,564&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=695,212) 4\. Specify the Accordion item title ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/9b9a7c1b-2a1b-493f-84b4-1c21d7d88d6e/ascreenshot.jpeg?tl_px=388,0&br_px=1248,480&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,122) 5\. Select an icon or an image for the Accordion item ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/2fd546ec-aa3c-4303-b6bd-9ff587a939d9/ascreenshot.jpeg?tl_px=479,53&br_px=1339,534&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) 6\. Click "Save" to confirm the changes ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/5812f2d0-a747-43be-8505-8ac38bd54561/ascreenshot.jpeg?tl_px=479,187&br_px=1339,668&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) 7\. Click the pencil icon to edit the content of an Accordion item ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/38a1a429-03aa-4f7b-8b7f-bcb33417c04e/ascreenshot.jpeg?tl_px=1060,77&br_px=1920,558&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=721,212) 8\. Drag and drop widgets on the Accordion item. You can use the following widgets: **Row, Text, Image, Button, Divider, Space, Contact Form, Slider, Grid Gallery, Carousel Slider, Tile Gallery, Social Links, Video Player, Audio Player, Advanced Image, Google Map, Mailchimp, Progress Bar, Circular Progress Bar, Embed** ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/f0cf13a0-a125-40a8-9c78-df7c33a893d7/ascreenshot.jpeg?tl_px=973,170&br_px=1833,651&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) 9\. Fill in the Accordion item with content ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/d5e71418-e15f-4c34-92da-0b01f6508158/ascreenshot.jpeg?tl_px=969,281&br_px=1829,762&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) 10\. Click "Apply" to confirm the changes ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/c0754167-04c3-47a2-ac73-e6c222eca012/ascreenshot.jpeg?tl_px=1231,0&br_px=2091,480&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=774,73) 11\. Click the gear icon if you need to update the accordion item title and accordion item icon/image ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/1fc18170-c8a2-474c-89ec-2bbedac4d3a1/ascreenshot.jpeg?tl_px=1060,76&br_px=1920,557&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=746,212) 12\. Click the duplicate icon to duplicate an Accordion item. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/9e8b5977-1cc5-4c08-8355-cfb6dd8cd950/ascreenshot.jpeg?tl_px=1060,76&br_px=1920,557&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=765,212) 13\. To delete an Accordion item, use the bin icon. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/47c10a33-01d0-4852-a631-d811c46152fc/ascreenshot.jpeg?tl_px=1060,77&br_px=1920,558&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=791,212) 14\. Select the Heading Format. The following options are available: **Normal, H2, H3, H4** H2, H3, and H4 are the heading tags that can be used for [SEO](https://success.ministrydesigns.help/how-do-i-seo-optimize-my-website). ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/5463315d-d98e-4fff-95f7-6817dd5e1db6/ascreenshot.jpeg?tl_px=1060,255&br_px=1920,736&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=669,212) 15\. The Items Behavior changes the accordion behavior. All items can be toggled one by one or expanded at the same time. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/0ac7084b-90e0-479b-abc5-a8385179c3a0/ascreenshot.jpeg?tl_px=1060,251&br_px=1920,732&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=579,212) 16\. If you need the first item to be expanded by default, use the corresponding checkbox ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/a174c8b8-3cf3-463d-ba24-e202ecb9f8d5/ascreenshot.jpeg?tl_px=1060,269&br_px=1920,750&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=578,212) 17\. If you need to not show the open/close icons, use the corresponding checkbox ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/bd4dc8db-60af-4fbb-8b15-1a1c2236c956/ascreenshot.jpeg?tl_px=1060,264&br_px=1920,745&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=580,212) 18\. Use the Icons Alignment to set Open/Close icons left or right. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/0b1c7654-91dd-45f7-9f1c-70efa745215e/ascreenshot.jpeg?tl_px=1060,267&br_px=1920,748&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=637,212) The rest of the features here - Spacing, Visible On, and Animation, are common features in most widgets in the website builder. Please refer to [this guide](https://success.ministrydesigns.help/what-are-the-shared-features-in-the-website-builder) for more information on these features. 19\. Switch to the Design tab ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/aaa1d15e-10dd-498d-8954-975ca087b4ae/ascreenshot.jpeg?tl_px=905,0&br_px=1765,480&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=761,202) 20\. Select a Preset for the Accordion widget. Presets are predefined designs that allow users to quickly apply a specific style or layout to a widget. You can customize the preset style in the [Design section](https://success.ministrydesigns.help/how-do-you-edit-presets-in-widgets) ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/ec73f640-37bb-4b50-a536-eb6662a1ea69/ascreenshot.jpeg?tl_px=1060,73&br_px=1920,554&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=681,212) 21\. Click "Save" to confirm the changes ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-08-07/67783eaf-13ab-4805-be94-3ca74db1b996/ascreenshot.jpeg?tl_px=905,0&br_px=1765,480&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=778,69) - [Account](https://success.ministrydesigns.help/account) - [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega#main-content) - [Next-Steps Framework](https://success.ministrydesigns.help/sites-formerly-omega#next-steps-framework) - [Video Guides](https://success.ministrydesigns.help/sites-formerly-omega#video-guides) - [Site Builder Profile Settings](https://success.ministrydesigns.help/sites-formerly-omega#site-builder-profile-settings) - [Pages](https://success.ministrydesigns.help/sites-formerly-omega#pages) - [Design](https://success.ministrydesigns.help/sites-formerly-omega#design) - [Media Library](https://success.ministrydesigns.help/sites-formerly-omega#media-library) - [Extensions](https://success.ministrydesigns.help/sites-formerly-omega#extensions) - [Blog](https://success.ministrydesigns.help/sites-formerly-omega#blog) - [Events](https://success.ministrydesigns.help/sites-formerly-omega#events) - [Small Groups](https://success.ministrydesigns.help/sites-formerly-omega#small-groups) - [Sermons](https://success.ministrydesigns.help/sites-formerly-omega#sermons) - [Settings](https://success.ministrydesigns.help/sites-formerly-omega#settings) - [SEO](https://success.ministrydesigns.help/sites-formerly-omega#seo) - [Website Management](https://success.ministrydesigns.help/sites-formerly-omega#website-management) - [FAQ](https://success.ministrydesigns.help/sites-formerly-omega#faq) - [illume for Church Members](https://success.ministrydesigns.help/illume-for-church-members#main-content) - [Signing Up](https://success.ministrydesigns.help/illume-for-church-members#signing-up) - [Giving](https://success.ministrydesigns.help/illume-for-church-members#giving) - [illume for Church Administration](https://success.ministrydesigns.help/illume-for-church-administration#main-content) - [Getting Started](https://success.ministrydesigns.help/illume-for-church-administration#getting-started) - [Managing Your Account](https://success.ministrydesigns.help/illume-for-church-administration#managing-your-account) - [Using People](https://success.ministrydesigns.help/illume-for-church-administration#using-people) - [Using Giving](https://success.ministrydesigns.help/illume-for-church-administration#using-giving) [![MD Logo 1\_Black-3](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-3.png?width=200&height=73&name=MD%20Logo%201_Black-3.png "MD Logo 1_Black-3")](http://ministrydesigns.com) 15 Carlyle St Floor 2, Battle Creek, Mi 49017 [mailto:email@email.com](mailto:email@email.com) Copyright © 2025,