This time we delve into the world of custom CSS to add a dash of style to the Squarespace accordion elements and streamline navigation on the page with smooth scrolling anchor links. These enhancements not only boost the aesthetic appeal of your site but also improve user experience.

Custom Styling for Squarespace Accordions

Accordions are great for organizing content, but custom styling can take them to the next level. Here’s the CSS we used to transform standard accordions into visually appealing elements:

This CSS adds alternating background colours, so it doesnt matter how many items you have in your accordion the colour scheme will keep alternating. Also adjust the style of the arrow icon to give it some more personality

Smooth Scrolling with Anchor Links

To enhance navigation, we implemented smooth scrolling for anchor links. This feature provides a seamless user experience, especially on pages with long content:

This simple line of code ensures a smooth transition when users click on anchor links, navigating them gracefully to different sections of the page.

Check out our video for a detailed guide on implementing these styles: