Table of Contents Plugin for Squarespace 7.1

Here’s how to use this table of contents plugin:

Copy the code below
Paste it into a new code block on any page/post
Get a TOC like the one you see just below!

Table of Contents

Looking for a TOC that only shows H2 headings?

What Is the Table of Contents Plugin?

This Squarespace table of contents (TOC) plugin is a simple piece of code you can use in a code block element for any page or blog post.

It auto-generates a clickable list of your post's headings (like H2s, H3s, H4s). So when someone clicks a section, it scrolls them right to that part of your blog post. Very scroll-savvy. Very UX-friendly.

Why Use A Table of Contents Plugin?

There’s no native TOC feature in Squarespace. So why bother using one?

Here are the biggest reasons:

Makes long posts easier to navigate
Better UX — helps readers scan easily
Boosts your SEO by improving structure and accessibility
Encourages more on-page time (Google loves that)

Also, it just looks clean.

How to Use This Squarespace Plugin

Paste the entire code (HTML + JS + CSS) into a Code Block at the top of any blog post
The TOC will only show up if your post includes at least one <h2>, <h3> or <h4>
The “Show/Hide” button lets visitors toggle the full table on and off

And that’s it! No backend CSS or extra technical steps.

How to Customize This Dang Plugin

✏️ Edit the Button Color

Update the #toggle-toc button by changing the border and text color here:

#toggle-toc {

border: 1px solid #27A2B7;

color: #27A2B7;

}

#toggle-toc:hover {

background: #27A2B7;

}

Swap in your own brand hex code (or play around with transparency, gradients, whatever you want).

🎨 Adjust TOC Styling (optional)

You can customize:

The container background:
- #toc-container { background: #f8f9fa; }

The title font size:
- .toc-title { font-size: 24px; }

*Edit the mobile version padding or spacing using the @media block at the bottom of the CSS.

Want more plugins? Check out my personal library!

📜 Expandable Table of Contents for Squarespace

Copy and paste this into a Code Block inside your Blog Post Template.

<!-- 🚀 Expandable Table of Contents -->
<div id="toc-container">
    <div id="toc-header">
        <button id="toggle-toc" aria-expanded="false">Show</button>
        <p class="toc-title">Table of Contents</p>
    </div>
    <ul id="toc-list"></ul>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const tocContainer = document.getElementById("toc-container");
    const tocList = document.getElementById("toc-list");
    const toggleButton = document.getElementById("toggle-toc");
    const blogContent = document.querySelector(".sqs-block-content, .entry-content, article") || document.body;
    const headers = blogContent.querySelectorAll("h2, h3, h4");

    if (!headers.length) {
        tocContainer.style.display = "none";
        return;
    }

    let currentH2List = tocList;
    let currentH3List = null;
    let currentH4List = null;

    headers.forEach((header, index) => {
        const id = `toc-${index}`;
        header.id = id;

        const listItem = document.createElement("li");
        const link = document.createElement("a");
        link.href = `#${id}`;
        link.textContent = header.textContent;
        listItem.appendChild(link);

        if (header.tagName === "H2") {
            currentH2List = tocList;
            currentH2List.appendChild(listItem);
            const newSubList = document.createElement("ul");
            newSubList.className = "toc-sublist";
            listItem.appendChild(newSubList);
            currentH3List = newSubList;
        } 
        else if (header.tagName === "H3") {
            if (currentH3List) {
                const h3Item = document.createElement("li");
                h3Item.className = "toc-subitem";
                h3Item.appendChild(link);
                currentH3List.appendChild(h3Item);
                const newSubList = document.createElement("ul");
                newSubList.className = "toc-subsublist";
                h3Item.appendChild(newSubList);
                currentH4List = newSubList;
            }
        }
        else if (header.tagName === "H4") {
            if (currentH4List) {
                const h4Item = document.createElement("li");
                h4Item.className = "toc-subsubitem";
                h4Item.appendChild(link);
                currentH4List.appendChild(h4Item);
            }
        }
    });

    toggleButton.addEventListener("click", () => {
        const isExpanded = tocList.style.maxHeight;
        tocList.style.maxHeight = isExpanded ? null : `${tocList.scrollHeight}px`;
        toggleButton.textContent = isExpanded ? "Show" : "Hide";
        toggleButton.setAttribute("aria-expanded", !isExpanded);
    });
});
</script>

<style>
#toc-container {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
    font-size: 16px;
    max-width: 100%;
}

#toc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
}

.toc-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

#toggle-toc {
    background: none;
    border: 1px solid #27A2B7;
    font-size: 16px;
    font-weight: 500;
    color: #27A2B7;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

#toggle-toc:hover {
    background: #27A2B7;
    color: white;
}

#toc-list {
    list-style: none;
    padding-left: 20px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-in-out;
    margin: 0;
}

#toc-list ul {
    list-style: none;
    padding-left: 20px;
    margin: 4px 0;
}

#toc-list li {
    margin: 4px 0;
    position: relative;
    line-height: 1.4;
}

#toc-list li::before {
    content: "•";
    color: #007bff;
    position: absolute;
    left: -15px;
}

.toc-sublist {
    margin-left: 20px !important;
    margin-top: 4px !important;
}

.toc-subsublist {
    margin-left: 20px !important;
    margin-top: 4px !important;
}

#toc-list > li > a {
    font-weight: 600;
    color: #007bff;
}

.toc-subitem > a {
    font-weight: 500;
    color: #0056b3;
    font-size: 0.95em;
}

.toc-subsubitem > a {
    font-weight: 400;
    color: #004085;
    font-size: 0.9em;
}

#toc-list a {
    text-decoration: none;
    transition: color 0.2s ease;
    display: block;
    padding: 2px 0;
}

#toc-list a:hover {
    color: #0056b3;
    text-decoration: underline;
}

@media (max-width: 768px) {
    #toc-container { padding: 12px; }
    .toc-title { font-size: 20px; }
}
</style>

Squarespace Plugins