Squarespace TOC Plugin 2

<V2: H2-Only TOC>
Just copy/paste this code into a new code block on any page/post.
📜 H2-Only Table of Contents for Squarespace

Copy and paste this into a Code Block inside your Blog Post Template.
<!-- 🚀 Expandable Table of Contents (H2 Only) -->
<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");

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

    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);
        tocList.appendChild(listItem);
    });

    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 li {
    margin: 4px 0;
    position: relative;
    line-height: 1.4;
}

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

#toc-list a {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
    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>