How to add links to accordion titles
In this tutorial, you will learn how to add links to accordion titles text on your Squarespace website. This tutorial is specifically designed for Squarespace 7.1.
Adding links to accordion titles enhances navigation and improves user experience by allowing users to access related content directly. This is especially useful for FAQs, product details, or collapsible sections where external or internal links can provide additional context.
Table of Contents
Why Add Links to Accordion Titles?
Adding clickable links to accordion titles in Squarespace 7.1 isn’t just a design trick – it’s a smart way to make your content easier to navigate, more interactive, and SEO-friendly. Whether you’re linking to internal pages or external resources, this small change allows users to jump directly to more detailed content which can boosts both usability and engagement.
Benefits of Adding Links to Accordion Titles
Improved Navigation: Users can quickly access relevant pages without expanding the accordion.
Enhanced User Experience: Provides an intuitive way to explore more information.
SEO Benefits: Internal linking can boost SEO by connecting related content.
Increased Engagement: Encourages users to explore more sections of your website.
Accessibility: Makes content more accessible by offering multiple ways to navigate.
Complexity: Easy
How to Add Links to Accordion Titles in Squarespace 7.1
Step 1
Open the accordion block and in the title enter the html in this format <a href="[LINK]">[your text here]</a>. For the example here it is <a href="https://bbc.co.uk">Decades of experience.</a>
Step 2
Copy the code and from the Squarespace dashboard navigate to Pages > Custom Code > Code Injection and paste the code in the footer section.
<style>
/* Accordion Title and Accordion Icon Hover Colour */
.accordion-item:hover {
.accordion-item__title, .accordion-icon-container {
color:#a49a5c !important;
}
}
.accordion-item[data-is-open="true"] {
.accordion-item__title, .accordion-icon-container {
color:#1f0639 !important;
}
}
</style>
<script>
<!--- Copyright Primitus Consultancy [https://primitusconsultancy.co.uk] --->
document.addEventListener("DOMContentLoaded", function () {
// Convert text into HTML
document.querySelectorAll("span.accordion-item__title").forEach(function (element) {
element.innerHTML = element.textContent;
});
});
</script>
Step 3
Copy the code below if you want the accordian title link open a new tab.
<script>
<!--- Copyright Primitus Consultancy [https://primitusconsultancy.co.uk] --->
document.addEventListener("DOMContentLoaded", function () {
// Convert text into HTML
document.querySelectorAll("span.accordion-item__title").forEach(function (element) {
element.innerHTML = element.textContent;
});
// Make links within accordion-item__title open in a new tab
document.querySelectorAll("span.accordion-item__title a").forEach(function (link) {
link.setAttribute("target", "_blank");
});
});
</script>
FAQs
Does adding links to accordion titles help with SEO?
Yes, internal linking via accordion titles can improve your site’s crawlability and relevance, which are both important for SEO.
Will adding links to accordion titles affect mobile performance?
No — this method uses simple HTML and CSS, ensuring fast load times and full responsiveness on all devices.
Is JavaScript necessary for this to work?
Yes. Squarespace treats accordion titles as plain text, so JavaScript is required to convert them into functional links.
Can I link to external websites as well as internal pages?
Absolutely! You can use either internal URLs (like `/services`) or external URLs (`https://example.com`) in the `<a href="">` field.
What happens if a user clicks the link and the accordion title at the same time?
Clicking the link will take priority, navigating the user to the linked page instead of toggling the accordion.
Can I style the links differently from the accordion title?
Yes! You can target the `a` tag inside `.accordion-item__title` using additional CSS for custom styles.
Conclusion
Incorporating links into accordion titles is a simple yet effective way to enhance usability and engagement. Whether linking to internal pages or external resources, this small addition can improve site navigation and user experience.
See other related pages
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, we recommend that you purchase the services of a developer.
