Accordion v2
Add a panel of content which is collapsed, and can be viewed by clicking on the title.
How to use
The accordion uses the Repeater feature to repeat each accordion item.
- Optionally add a Heading
- Optionally add Quick-Nav Text to be picked up the Quick Navigation Bar/Progress Navigation Bar
- Choose a Accordion Colour: White or Red.
For each accordion:
- Add a Accordion Title
- Add the Accordion Content, see General Text examples for content options.
Content Type Details
ID: 704
Name: Accordion v2
Description: Accordions with an optional Heading that can be grouped to form a list of accordions
Minimum user level: Contributor
Content Type Elements Details
| Name | Description | Size | Type | Required |
|---|---|---|---|---|
| Name | The Name Element | 85 Characters | Plain Text | Yes |
| Quick-Nav Text | Optionally add Quick-Nav Text to be picked up the Quick Navigation Bar/Progress Navigation Bar to the first accordion in a group | 30 Characters | Plain Text | No |
| Heading | Add a Heading | 150 Characters | Plain Text | No |
| Accordion Background Colour | Select a Accordion Colour | N/A | Select Box (List: Accordions Colour v2) | Yes |
| Accordion Item | Repeated accordion item | N/A | Repeater | Yes |
Examples
White
Frequently asked questions
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquet, ipsum ut bibendum consequat, leo eros tincidunt ante, vestibulum tincidunt sapien urna non dui. Nunc semper arcu tellus, id imperdiet ipsum porta pharetra. Cras magna erat, tincidunt at neque eu, faucibus efficitur nulla. Donec quis nisi sed mi feugiat vestibulum at non eros. Integer gravida lacinia augue, sit amet vehicula tellus hendrerit ut. Maecenas nec arcu id augue consequat dignissim vitae et dui. Fusce sed urna nisi. Praesent et rutrum purus, vitae interdum metus. Nunc vel pellentesque purus. Morbi faucibus vulputate imperdiet. Proin diam quam, viverra at fermentum ac, eleifend vitae velit.
Vestibulum nisl ex, viverra ut tortor sagittis, accumsan consectetur velit. Sed suscipit tortor nec ipsum bibendum tincidunt. Duis vestibulum metus sapien, sed malesuada felis ornare non. In tortor mauris, malesuada in lectus in, fermentum molestie justo. Vivamus pretium tempus erat posuere venenatis. Maecenas ullamcorper justo quis ligula egestas hendrerit. Ut a semper libero, non interdum mi. Vivamus faucibus tortor est, vitae faucibus augue pretium eu. Aliquam eget malesuada lacus. In hac habitasse platea dictumst. Nullam malesuada et lorem vitae efficitur. Etiam turpis lectus, posuere id mi vitae, rhoncus feugiat odio.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis dui vitae eros vulputate scelerisque. Integer convallis est sit amet sem viverra sollicitudin. Proin fermentum dapibus ipsum sed vulputate. Nam venenatis sodales ante nec placerat. Donec porttitor eros ac odio dignissim ultrices. Fusce faucibus enim vel nisl cursus egestas. Praesent a ligula a ipsum suscipit vulputate eget quis tellus. Nunc quis magna commodo, convallis quam lacinia, rhoncus tortor. Nullam ipsum mi, tincidunt ut mi in, tempus mattis sapien. Aliquam eu viverra orci. Mauris sit amet metus quis velit vulputate finibus id at nunc.
Vestibulum nisl ex, viverra ut tortor sagittis, accumsan consectetur velit. Sed suscipit tortor nec ipsum bibendum tincidunt. Duis vestibulum metus sapien, sed malesuada felis ornare non. In tortor mauris, malesuada in lectus in, fermentum molestie justo. Vivamus pretium tempus erat posuere venenatis. Maecenas ullamcorper justo quis ligula egestas hendrerit. Ut a semper libero, non interdum mi. Vivamus faucibus tortor est, vitae faucibus augue pretium eu. Aliquam eget malesuada lacus. In hac habitasse platea dictumst. Nullam malesuada et lorem vitae efficitur. Etiam turpis lectus, posuere id mi vitae, rhoncus feugiat odio.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis dui vitae eros vulputate scelerisque. Integer convallis est sit amet sem viverra sollicitudin. Proin fermentum dapibus ipsum sed vulputate. Nam venenatis sodales ante nec placerat. Donec porttitor eros ac odio dignissim ultrices. Fusce faucibus enim vel nisl cursus egestas. Praesent a ligula a ipsum suscipit vulputate eget quis tellus. Nunc quis magna commodo, convallis quam lacinia, rhoncus tortor. Nullam ipsum mi, tincidunt ut mi in, tempus mattis sapien. Aliquam eu viverra orci. Mauris sit amet metus quis velit vulputate finibus id at nunc.
Vestibulum nisl ex, viverra ut tortor sagittis, accumsan consectetur velit. Sed suscipit tortor nec ipsum bibendum tincidunt. Duis vestibulum metus sapien, sed malesuada felis ornare non. In tortor mauris, malesuada in lectus in, fermentum molestie justo. Vivamus pretium tempus erat posuere venenatis. Maecenas ullamcorper justo quis ligula egestas hendrerit. Ut a semper libero, non interdum mi. Vivamus faucibus tortor est, vitae faucibus augue pretium eu. Aliquam eget malesuada lacus. In hac habitasse platea dictumst. Nullam malesuada et lorem vitae efficitur. Etiam turpis lectus, posuere id mi vitae, rhoncus feugiat odio.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis dui vitae eros vulputate scelerisque. Integer convallis est sit amet sem viverra sollicitudin. Proin fermentum dapibus ipsum sed vulputate. Nam venenatis sodales ante nec placerat. Donec porttitor eros ac odio dignissim ultrices. Fusce faucibus enim vel nisl cursus egestas. Praesent a ligula a ipsum suscipit vulputate eget quis tellus. Nunc quis magna commodo, convallis quam lacinia, rhoncus tortor. Nullam ipsum mi, tincidunt ut mi in, tempus mattis sapien. Aliquam eu viverra orci. Mauris sit amet metus quis velit vulputate finibus id at nunc.
Vestibulum nisl ex, viverra ut tortor sagittis, accumsan consectetur velit. Sed suscipit tortor nec ipsum bibendum tincidunt. Duis vestibulum metus sapien, sed malesuada felis ornare non. In tortor mauris, malesuada in lectus in, fermentum molestie justo. Vivamus pretium tempus erat posuere venenatis. Maecenas ullamcorper justo quis ligula egestas hendrerit. Ut a semper libero, non interdum mi. Vivamus faucibus tortor est, vitae faucibus augue pretium eu. Aliquam eget malesuada lacus. In hac habitasse platea dictumst. Nullam malesuada et lorem vitae efficitur. Etiam turpis lectus, posuere id mi vitae, rhoncus feugiat odio.
Red
Frequently asked questions
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquet, ipsum ut bibendum consequat, leo eros tincidunt ante, vestibulum tincidunt sapien urna non dui. Nunc semper arcu tellus, id imperdiet ipsum porta pharetra. Cras magna erat, tincidunt at neque eu, faucibus efficitur nulla. Donec quis nisi sed mi feugiat vestibulum at non eros. Integer gravida lacinia augue, sit amet vehicula tellus hendrerit ut. Maecenas nec arcu id augue consequat dignissim vitae et dui. Fusce sed urna nisi. Praesent et rutrum purus, vitae interdum metus. Nunc vel pellentesque purus. Morbi faucibus vulputate imperdiet. Proin diam quam, viverra at fermentum ac, eleifend vitae velit.
Vestibulum nisl ex, viverra ut tortor sagittis, accumsan consectetur velit. Sed suscipit tortor nec ipsum bibendum tincidunt. Duis vestibulum metus sapien, sed malesuada felis ornare non. In tortor mauris, malesuada in lectus in, fermentum molestie justo. Vivamus pretium tempus erat posuere venenatis. Maecenas ullamcorper justo quis ligula egestas hendrerit. Ut a semper libero, non interdum mi. Vivamus faucibus tortor est, vitae faucibus augue pretium eu. Aliquam eget malesuada lacus. In hac habitasse platea dictumst. Nullam malesuada et lorem vitae efficitur. Etiam turpis lectus, posuere id mi vitae, rhoncus feugiat odio.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis dui vitae eros vulputate scelerisque. Integer convallis est sit amet sem viverra sollicitudin. Proin fermentum dapibus ipsum sed vulputate. Nam venenatis sodales ante nec placerat. Donec porttitor eros ac odio dignissim ultrices. Fusce faucibus enim vel nisl cursus egestas. Praesent a ligula a ipsum suscipit vulputate eget quis tellus. Nunc quis magna commodo, convallis quam lacinia, rhoncus tortor. Nullam ipsum mi, tincidunt ut mi in, tempus mattis sapien. Aliquam eu viverra orci. Mauris sit amet metus quis velit vulputate finibus id at nunc.
Vestibulum nisl ex, viverra ut tortor sagittis, accumsan consectetur velit. Sed suscipit tortor nec ipsum bibendum tincidunt. Duis vestibulum metus sapien, sed malesuada felis ornare non. In tortor mauris, malesuada in lectus in, fermentum molestie justo. Vivamus pretium tempus erat posuere venenatis. Maecenas ullamcorper justo quis ligula egestas hendrerit. Ut a semper libero, non interdum mi. Vivamus faucibus tortor est, vitae faucibus augue pretium eu. Aliquam eget malesuada lacus. In hac habitasse platea dictumst. Nullam malesuada et lorem vitae efficitur. Etiam turpis lectus, posuere id mi vitae, rhoncus feugiat odio.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis dui vitae eros vulputate scelerisque. Integer convallis est sit amet sem viverra sollicitudin. Proin fermentum dapibus ipsum sed vulputate. Nam venenatis sodales ante nec placerat. Donec porttitor eros ac odio dignissim ultrices. Fusce faucibus enim vel nisl cursus egestas. Praesent a ligula a ipsum suscipit vulputate eget quis tellus. Nunc quis magna commodo, convallis quam lacinia, rhoncus tortor. Nullam ipsum mi, tincidunt ut mi in, tempus mattis sapien. Aliquam eu viverra orci. Mauris sit amet metus quis velit vulputate finibus id at nunc.
Vestibulum nisl ex, viverra ut tortor sagittis, accumsan consectetur velit. Sed suscipit tortor nec ipsum bibendum tincidunt. Duis vestibulum metus sapien, sed malesuada felis ornare non. In tortor mauris, malesuada in lectus in, fermentum molestie justo. Vivamus pretium tempus erat posuere venenatis. Maecenas ullamcorper justo quis ligula egestas hendrerit. Ut a semper libero, non interdum mi. Vivamus faucibus tortor est, vitae faucibus augue pretium eu. Aliquam eget malesuada lacus. In hac habitasse platea dictumst. Nullam malesuada et lorem vitae efficitur. Etiam turpis lectus, posuere id mi vitae, rhoncus feugiat odio.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis dui vitae eros vulputate scelerisque. Integer convallis est sit amet sem viverra sollicitudin. Proin fermentum dapibus ipsum sed vulputate. Nam venenatis sodales ante nec placerat. Donec porttitor eros ac odio dignissim ultrices. Fusce faucibus enim vel nisl cursus egestas. Praesent a ligula a ipsum suscipit vulputate eget quis tellus. Nunc quis magna commodo, convallis quam lacinia, rhoncus tortor. Nullam ipsum mi, tincidunt ut mi in, tempus mattis sapien. Aliquam eu viverra orci. Mauris sit amet metus quis velit vulputate finibus id at nunc.
Vestibulum nisl ex, viverra ut tortor sagittis, accumsan consectetur velit. Sed suscipit tortor nec ipsum bibendum tincidunt. Duis vestibulum metus sapien, sed malesuada felis ornare non. In tortor mauris, malesuada in lectus in, fermentum molestie justo. Vivamus pretium tempus erat posuere venenatis. Maecenas ullamcorper justo quis ligula egestas hendrerit. Ut a semper libero, non interdum mi. Vivamus faucibus tortor est, vitae faucibus augue pretium eu. Aliquam eget malesuada lacus. In hac habitasse platea dictumst. Nullam malesuada et lorem vitae efficitur. Etiam turpis lectus, posuere id mi vitae, rhoncus feugiat odio.