Easy Table of Contents for Squarespace blog pages

webdesign
Feb 16
😎 Sick of long content pages and not sure how much longer or where I’m on the page… so I found and updated this copy to make it easier for everyone on Squarespace Circle. Just copy/paste this code into a new code block on any blog post.
NOTE:
Squarespace 7.1 — Sticky TOC Plugin
This won’t work properly if using another TOC plugin
This won’t show properly (on desktop) if using a custom sidebar in your site CSS
Check out the instructions below for information on edits and troubleshooting
The code includes Tags to help you customize colors, fonts and sizes.
Copy and paste this into a Code Block inside exactly where you want it to appear on your blog page.
This will create a sticky table of contents that stays visible as you scroll down the page.

<!-- Load Google Material Icons (needed for arrow_forward \e5c8) -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- =========================================================
     🚀 TOC — Simple Pin-on-Scroll (Squarespace-safe)
     - Expanded by default
     - Chevron toggle
     - Pins in the same spot you placed it
     - Default marker = dot
     - Active marker (ONLY after user click) = Material Icons arrow_forward (\e5c8)
     - NO auto-highlighting on load or scroll
     ========================================================= -->

<nav id="toc-container" aria-label="Table of contents">
  <button id="toggle-toc" type="button" aria-expanded="true" aria-controls="toc-list">
    <span class="toc-toggle-label">Table of Contents</span>
    <span class="toc-chevron" aria-hidden="true">
      <svg viewBox="0 0 24 24" focusable="false">
        <path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2"
              stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </span>
  </button>

  <ul id="toc-list"></ul>
</nav>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const toc = document.getElementById("toc-container");
  const list = document.getElementById("toc-list");
  const btn  = document.getElementById("toggle-toc");

  const content =
    document.querySelector(".sqs-block-content, .entry-content, article") || document.body;

  const headers = content.querySelectorAll("h2, h3, h4");
  if (!headers.length) { toc.style.display = "none"; return; }

  // Prevent duplicates if Squarespace re-runs scripts
  if (list.children.length) return;

  // ---------- Build TOC ----------
  const slugify = (t) => t.toLowerCase().trim()
    .replace(/[^\w\s-]/g, "")
    .replace(/\s+/g, "-")
    .slice(0, 60);

  let h3List = null;
  let h4List = null;

  // Map headingId -> <li> element (so we can switch dot -> arrow)
  const liById = new Map();

  headers.forEach((h, i) => {
    if (!h.id) h.id = `toc-${slugify(h.textContent) || "section"}-${i}`;

    const link = document.createElement("a");
    link.href = `#${h.id}`;
    link.textContent = h.textContent;

    let li;

    if (h.tagName === "H2") {
      li = document.createElement("li");
      li.appendChild(link);
      list.appendChild(li);

      h3List = document.createElement("ul");
      h3List.className = "toc-sublist";
      li.appendChild(h3List);

      h4List = null;
    }

    if (h.tagName === "H3" && h3List) {
      li = document.createElement("li");
      li.className = "toc-subitem";
      li.appendChild(link);
      h3List.appendChild(li);

      h4List = document.createElement("ul");
      h4List.className = "toc-subsublist";
      li.appendChild(h4List);
    }

    if (h.tagName === "H4" && h4List) {
      li = document.createElement("li");
      li.className = "toc-subsubitem";
      li.appendChild(link);
      h4List.appendChild(li);
    }

    if (li) liById.set(h.id, li);
  });

  // ---------- Expanded by default + toggle ----------
  const open = () => {
    list.style.maxHeight = list.scrollHeight + "px";
    btn.setAttribute("aria-expanded", "true");
  };

  const close = () => {
    list.style.maxHeight = "0px";
    list.style.overflowY = "hidden";
    btn.setAttribute("aria-expanded", "false");
  };

  open();

  btn.addEventListener("click", () => {
    const expanded = btn.getAttribute("aria-expanded") === "true";
    expanded ? close() : open();
  });

  // ---------- Pin in place (simple) ----------
  let pin = null;

  const getHeaderOffset = () => {
    const header = document.querySelector(
      "header, .Header, #header, .header, .sqs-announcement-bar, .Header--top"
    );

    if (!header) return 16;

    const s = window.getComputedStyle(header);
    const isOverlay = (s.position === "fixed" || s.position === "sticky");
    if (!isOverlay) return 16;

    return Math.round(header.getBoundingClientRect().height) + 16;
  };

  const measure = () => {
    toc.classList.remove("toc--fixed");
    toc.style.left = "";
    toc.style.top = "";
    toc.style.width = "";

    const r = toc.getBoundingClientRect();
    const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;
    const scrollX = window.pageXOffset || document.documentElement.scrollLeft || 0;

    const topOffset = getHeaderOffset();

    pin = {
      topOffset,
      startY: r.top + scrollY - topOffset,
      left: r.left + scrollX,
      width: r.width
    };
  };

  const onScroll = () => {
    if (!pin) measure();

    const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;

    if (scrollY >= pin.startY && window.innerWidth >= 1024) {
      toc.classList.add("toc--fixed");
      toc.style.top = pin.topOffset + "px";
      toc.style.left = pin.left + "px";
      toc.style.width = pin.width + "px";
    } else {
      toc.classList.remove("toc--fixed");
      toc.style.left = "";
      toc.style.top = "";
      toc.style.width = "";
    }
  };

  measure();
  onScroll();

  window.addEventListener("scroll", onScroll, { passive: true });
  window.addEventListener("resize", () => {
    measure();
    onScroll();
    if (btn.getAttribute("aria-expanded") === "true") open();
  });
  window.addEventListener("load", () => {
    measure();
    onScroll();
    if (btn.getAttribute("aria-expanded") === "true") open();
  });

  // ---------- Active marker ONLY after click ----------
  let currentActiveId = null;

  const setActive = (id) => {
    if (!id || id === currentActiveId) return;

    // remove previous
    if (currentActiveId && liById.has(currentActiveId)) {
      const prevLi = liById.get(currentActiveId);
      prevLi.classList.remove("toc-active-item");
      const prevLink = prevLi.querySelector("a");
      if (prevLink) prevLink.classList.remove("toc-active");
    }

    // add new
    const li = liById.get(id);
    if (!li) return;

    li.classList.add("toc-active-item");
    const link = li.querySelector("a");
    if (link) link.classList.add("toc-active");

    currentActiveId = id;
  };

  // Attach click handlers to TOC links
  list.querySelectorAll("a").forEach(a => {
    a.addEventListener("click", () => {
      const id = (a.getAttribute("href") || "").replace("#", "");
      setActive(id);
    });
  });

  // NOTE: We intentionally do NOT call setActive() on load or scroll.
});
</script>

<style>
/* Container */
#toc-container {
  background: #fff;
  padding: 15px;
  border-radius: 15px;
  margin: 20px 0;
  font-size: 14px;
  max-width: 100%;
  align-self: flex-start;
  z-index: 50;
  color: #13091B;
}

/* Fixed mode */
#toc-container.toc--fixed {
  position: fixed;
  z-index: 9999;
}

/* Header button (no outline box) */
#toggle-toc {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  background: transparent;
  border: none;
  padding: 0;
  margin: 0;

  cursor: pointer;
  color: #13091B;
}
#toggle-toc:focus,
#toggle-toc:focus-visible { outline: none; }

.toc-toggle-label {
  font-size: 20px;
  font-weight: 650;
  margin: 0;
  color: #13091B;
}

.toc-chevron {
  width: 18px;
  height: 18px;
  display: inline-flex;
  transition: transform 0.2s ease;
  color: #13091B;
}
.toc-chevron svg { width: 18px; height: 18px; display: block; }
#toggle-toc[aria-expanded="false"] .toc-chevron { transform: rotate(-90deg); }

/* List */
#toc-list {
  list-style: none;
  padding-left: 20px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease-in-out;
  margin: 10px 0 0 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;
}

/* ✅ Default marker = dot */
#toc-list li::before {
  content: "•";
  color: #13091B;
  position: absolute;
  left: -16px;
  top: 0;
}

/* ✅ Active marker = Material arrow_forward */
#toc-list li.toc-active-item::before {
  content: "\e5c8";
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  color: #13091B;

  left: -22px;
  top: 2px;
}

/* Links */
#toc-list a {
  color: #13091B;
  text-decoration: none;
  display: block;
  padding: 2px 0;
  transition: opacity 0.2s ease;
}
#toc-list a:hover { opacity: 0.8; text-decoration: underline; }

/* Hierarchy emphasis */
#toc-list > li > a { font-weight: 650; }
.toc-subitem > a { font-weight: 550; font-size: 0.95em; }
.toc-subsubitem > a { font-weight: 450; font-size: 0.9em; }

/* ✅ Active link style (only after click) */
#toc-list a.toc-active {
  font-weight: 800;
  text-decoration: underline;
}

/* Mobile: don’t pin */
@media (max-width: 1023px) {
  #toc-container.toc--fixed {
    position: static;
    left: auto !important;
    top: auto !important;
    width: auto !important;
  }
  .toc-toggle-label { font-size: 14px; }
}
</style>
<script>
  console.log("this is just an example");
</script>
web design
Fede Abrahams
http://www.fede.design
Easy Table of Contents for Squarespace blog pages

When Finding Talent is Your Talent
