# Collapsible content

{% embed url="https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da" %}

Collapsible content is commonly used for frequently asked questions(FAQs) page.

<table><thead><tr><th width="272">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Caption</td><td>Enter caption to display as a small text in the section.</td></tr><tr><td>Caption style</td><td><p>Following is the caption style customization of the collapsible content of the section:</p><ul><li>Solid</li><li>Outline</li><li>Link</li></ul></td></tr><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading position</td><td><p>Following is the heading position customization of the heading in the section:</p><ul><li>Next to the collapse</li><li>Top to the collapse</li></ul></td></tr><tr><td>Description</td><td>Enter text to display as a description in the section.</td></tr><tr><td>Heading size</td><td><p>Following is the font size customization of the heading in the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Heading alignment</td><td><p>Customization of "Heading alignment" in desktop and mobile devices is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Button label</td><td>Use "Button label" to add a label to the Button in the section.</td></tr><tr><td>Button link</td><td>Use "Button link" to add a link to the Button in the section.</td></tr><tr><td>Button style</td><td><p>Customization of "Button style" in desktop and mobile devices is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Layout</td><td><p>Customization of "Layout" in desktop and mobile devices is as follows:</p><ul><li>No container</li><li>Row container</li><li>Section container</li></ul></td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr><tr><td>Show secondary background</td><td>By enabling this checkbox, you can show the secondary background in Collapsible content section.</td></tr><tr><td>Image layout</td><td><p><strong>Image</strong><br>Use "Image" to add the image to the section.<br><br><strong>Image ratio</strong></p><p>Customization of the "Image ratio" in the Collapsible content section is as follows:</p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul><p><strong>Desktop layout</strong></p><p>The desktop Image customization section is as follows:</p><ul><li>Image first</li><li>Image second</li></ul></td></tr></tbody></table>

<figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2Fpx3jjwPVsyQqfG3A7Qjd%2Fcollapsible-content.png?alt=media&#x26;token=b4c41817-b18b-45d2-966e-ef461d4745cd" alt=""><figcaption></figcaption></figure>

## Add collapsible row

To add row to the Collapsible content section, click on the 'Add collapsible row'. There are many options available , as you can see in the below points and screenshot.

| Block                 | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Heading               | Enter text to display as a heading in the section.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| icon                  | <p>In the section, the icons are given to select. are for selecting:</p><ul><li>None</li><li>Flash sale</li><li>Apple</li><li>Banana</li><li>Bottle</li><li>Box</li><li>Carrot</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Gluten free</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li></ul> |
| Custom image          | You can customize the icon in the collapsible row by adding a custom image in its place.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| Row content           | Enter text to display as a row content in the section.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| Image                 | To add an image below the row content, select the image here.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| Row content from page | By using these settings, the selected page will display its content like row content.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |

<figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FZZ35eOAVwVtZA6iJtZu1%2Fcollapsible-content-blocks.png?alt=media&#x26;token=4a8901f2-eced-46a8-a59e-ae6532658800" alt=""><figcaption></figcaption></figure>
