What is an Accordion?
The Accordion block allows you to display more content while saving space with text in a compacted format. Users can scan displayed headings and expand an item of interest through the user-friendly Accordion structure.
| Common Usages: | Benefits |
| FAQ page | An Accordion is perfect for displaying your FAQs. The structure is essential for users to navigate through enquiries and get information more efficiently. |
| One-page website | If you have lots of content for a one-page website, the Accordion will make the page less daunting. Visitors will reduce scrolling to find important aspects of your business with the page more engaging. |
| Creativity | An Accordion can be used for multiple usages. Such as categorising, displaying prices, and providing information on products/services. Be creative in displaying all your content! |
How do I add an Accordion block?
- Open your Rocketspark Dashboard.
- Go to Editor mode.
- Add a new stack for where you want to place the Accordion block.
- Once you've added a stack to your website, add a block.
- You will see the 'Add a block' popup. Choose Accordion.
- The following format will appear:
-
To add more rows, click the blue plus sign (there is no limit on the number of rows in the Accordion). Please Note: You can only view and edit one Accordion row at a time.
- To remove a row, click the rubbish icon when you hover over the content.
- Click the arrow icon to rearrange the order of the Accordion/FAQ.
- Once you are happy with your Accordion/FAQ layout, click Save on the right-hand side
- To edit your Accordion/FAQ again, click the edit pencil found when you hover over the Accordion.
________________________________________________________________________________________
How to style the Accordion/FAQ:
-
Accordion Style: You can change the Accordion style to be either boxes or lines that separate the content.
Line Style Box Style
-
Border: You can change the border colour that surrounds the Accordion/FAQ.
- You can then change the border width. Click the plus and minus icons under border settings.
-
Background: If you have chosen 'Box Style', you can add a background colour.
-
Icon style: Click the 'Arrow' dropdown to choose between plus icons or arrow icons that display the expanded content.
-
Padding: To increase or decrease the top and bottom spacing of the Accordion, slide your mouse up and down the padding settings.
________________________________________________________________________________________
How to edit the text in the Accordion:
- To edit the content in each section of your Accordion/FAQ, click the edit pencil for each row in your Accordion.
-
Click on 'Heading' to change the main text displayed. You can add an H1, H2 or H3 heading. Check out How do I use headings correctly?
-
Below the Heading, click on the paragraph text which will be displayed in the expanded view.
You can change the paragraph text to bold, italic, or underlined. You can also add bullet points, numbered points, text links, text alignment, add a table and add any code.
- Click Save on the left-hand side when you are happy with that Accordion row.
- Once you have saved the Accordion, to change the font, text size and text colour, go to the Edit design in your stack setting (on the far right-hand side).
- In these settings, click on the Headings & Paragraphs dropdown.
- Change the paragraph style and the heading style. Check out: How do I change the heading and paragraph style?
-
Please note: you can only select one text styling for your heading and paragraphs in each Accordion block.
- All mobile customisation is through the stack 'Edit Design' settings. Check out: How to adjust text to suit a mobile screen?
If you want an accordion with lots of text please beware that there is a character limit of 60,000. If you want more characters than this we suggest creating another accordion and adding the text through there.