# Accordion

This Broadcast section is packed with full-featured accordion blocks to help you design and build rich, interactive content. Display columns of rich content, such as images, icons with messaging, and text. 

<figure><img src="https://content.gitbook.com/content/sD7BEEDU3B7WiEJlN0F7/blobs/BqaSCnTs88Oxcapj2oys/accordion%20take%202.gif" alt="accordion section gif showcase"><figcaption><p><strong>Multiple accordion sections used with different column sizes</strong></p></figcaption></figure>

### Section settings

Build rich accordions on the home page, a lookbook, product pages, or anywhere on your site. Choose from a rich set of content blocks to display eye-catching information. Stack multiple accordion sections together to incorporate multiple column sizes.

<table><thead><tr><th width="198">Settings</th><th width="148.4053955078125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Open by default</td><td align="center"><code>checkbox</code></td><td>When enabled, the first accordion item is expanded by default.</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Main heading for the section. Hidden if left blank.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Controls the size of the section heading. Options: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td><strong>Icon</strong></td><td align="center"></td><td></td></tr><tr><td>Show icon</td><td align="center"><code>checkbox</code></td><td>Toggle visibility of icons for each item.<br></td></tr><tr><td>Icon</td><td align="center"><code>select</code></td><td>Choose from a list of themed icons.</td></tr><tr><td>Alternative icon/image</td><td align="center"><code>image_picker</code></td><td>Upload a custom image.</td></tr><tr><td>Size</td><td align="center"><code>range</code></td><td>Set the size of the icon/image.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Choose between <code>Normal</code> or <code>Narrow</code> container width.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Select a predefined color scheme.</td></tr><tr><td>Icon</td><td align="center"><code>color</code></td><td>Set a custom icon color.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Add top padding.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Add bottom padding.</td></tr></tbody></table>

### Video Overview

This video demonstrates how to create image, icon, and text accordions in Broadcast:

{% embed url="<https://www.loom.com/share/2ab14920215840208e31da369ee14489?sid=66cd6c97-3d51-4b2e-baf4-a413be3a0650>" %}
**Video walkthrough of the accordion section**
{% endembed %}

### See also

For pages with longer question-and-answer style content, Broadcast has a unique **Sidebar** section that automatically generates navigation to groups of questions or content:

{% embed url="<https://broadcast.presidiocreative.com/sections/sections/text/sidebar>" %}

For a simple text-based question-and-answer section that supports one or two columns, Broadcast includes the **Accordion group** section:

{% embed url="<https://broadcast.presidiocreative.com/sections/sections/storytelling/accordion-group>" %}