Table of Contents Plugin for Squarespace

Just copy/paste this code into a new code block on any page/post.
📜 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 #007bff;
    font-size: 16px;
    font-weight: 500;
    color: #007bff;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

#toggle-toc:hover {
    background: #007bff;
    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>
Looking for a TOC that only shows H2 headings? I got you!
Click here.