An accordion is a design feature commonly used on Squarespace websites to organise content in a compact, user-friendly way. It allows sections of text or media to expand and collapse when clicked, helping users navigate content without overwhelming them with too much information at once. Accordions are often used for FAQs, service descriptions, or any content that benefits from being neatly categorised.

Styled Accordion

Screenshot 2024-09-18 at 11.42.42.png

1. Log into Squarespace

  • Log into your Squarespace account and navigate to the website editor for the page where you want to add the accordion.

2. Go to Design > Custom CSS

  • In the left-hand menu, click on Design.

  • From the dropdown, select Custom CSS. This is where you will paste your CSS code to style the accordion.

3. Add the Accordion CSS Code

  • In the Custom CSS panel, paste the following code to style the accordion and press save.

How To Set Up


4. Add the Accordion Block

  • Now, navigate to the page where you want to display the accordion.

  • Add the accordion (it will display like the image above).

Customise

  1. Customising the Code:

    • Background Colour: Change the background-colour value in the .accordion-item class to set a new background for each accordion item.

    • Border Colour: Modify the border-left property to change the accent colour and width of the border.

    • Hover Effect: Adjust the .accordion-item:hover section to change the hover effect (border colour change).

    • Font Size: Update the font-size in .accordion-item-title to control the size of the title.

    • Text Colour: Change the colour in .accordion-item-title and .accordion-item-content to customise the title and content text colours.

  2. Save and Preview:

    • Once you’ve added and customised the code, save the page and preview it to see how the accordion behaves.

Need Custom Solutions?

All of our pre-built codes are completely free to use! If you need a more bespoke solution or want additional customisations, feel free to get in touch for a free quote. Don’t pay extortionate agency fees—our team of designers charge by the hour and can deliver tailor-made solutions for your Squarespace website.

Next

Text Card