Skip to content
St George's and City have merged. Find out more.

The accordion component allows you to condense lengthy pages by hiding some of your content in expandable accordion rows.

  1. Drag the accordion-component onto the page and drop it at the end of a sentence.

  2. Provide a title for your accordion in the {Add accordion introduction here} section. This should always be a Heading 4.

  3. Drag an accordion-item component into the {Add accordion-items here} section. Repeat for as many accordion rows as you require.

  4. Provide an accordion row heading in each {Accordion item label} section, and enter your content into the {Accordion Item Content}. Note that any headings used in an accordion row should be a Heading 6.

  5. You can also add other components to accordions, such as tables, images and forms by dragging them into the {Accordion Item Content} area.

  6. Once you’ve entered all of your accordion content, make sure you delete any remaining instructional {Add accordion} text.

An example of the accordion component

View all Close all
Accordion row 1: table

Accordions can contain tables.

An example table.
 Table Cell 1 Cell 2 Cell 3
Run a rig Corsair interloper coffer spike to go on account lee boatswain chase guns maroon Cat o'nine tails carouser driver smartly fathom plunder spyglass me capstan Barbary Coast. Scourge of the seven seas yawl lass Privateer topsail reef tackle bilged on her anchor chase guns heave to quarter keel Letter of Marque league to go on account keelhaul swab Chain Shot shrouds rigging. Wench boatswain Sink me gally haul wind deadlights bring a spring upon her cable quarterdeck grog blossom case shot strike colors gangway swab interloper fire in the hole cog barque hempen halter snow ballast.
Accordion row 2: image

Accordion rows can also contain images.St_georges_hyde_park

Accordion row 3
You can add as many accordion rows as you like, however, too many rows can make your content difficult to navigate and make sense of.

An accordion in the CMS

 

accordion 1 This is how an accordion component appears in the CMS editor.

 

Find a profileSearch by A-Z