Table of contents

[rmccar]

Use this place to discuss the table of contents component in the ONS Design System

[jrbarnes9]

#844 resolved

[jrbarnes9]

Issue #1654 raised

[jrbarnes9]

Raised #1790

[Al-Davies]

UR findings on table of contents
tested as part of Census website testing Nov-Dec 2020

• TOC's have been used successfully as part of the 2021 Census website
• users understanding that these will jump them down to the relevant sections of the page
• where floating TOC's are used (in statistical bulletins), users don't always notice these
• users may use them to jump down to sections, but generally scroll back up the page to get to the top (not often seeing any back to top links)

[Joe-Dixon-ID]

The sticky table of contents (In-page table of contents variant) test really well in UR sessions but on the website we have no control over the content that is used on it (i.e it could make the height greater that the viewport height which makes degrades the UX of the component).

I want to propose a version that is non sticky by default but uses javascript to insert the class that makes the table sticky.

This way it scrolls with the page (non-sticky) if its greater than viewport height (or even if users has JS off) and if not it uses the sticky version.

So if you remove the class ons-grid__col--sticky@m in the HTML and have JS like this for example:

document.addEventListener("DOMContentLoaded", function () {
function updateStickyToc() {
const tocContainer = document.querySelector(".ons-grid__col");
const toc = document.querySelector(".ons-toc-container");

if (toc && tocContainer) {
  const tocHeight = toc.offsetHeight;
  const viewportHeight = window.innerHeight;

  if (tocHeight <= viewportHeight) {
    tocContainer.classList.add("ons-grid__col--sticky@m");
  } else {
    tocContainer.classList.remove("ons-grid__col--sticky@m");
  }
}

}

// Run on page load
updateStickyToc();

// Run on window resize
window.addEventListener("resize", updateStickyToc);
});

[MagdalenaLarge]

Hello @Joe-Dixon-ID your request has been reviewed and added to our backlog. You can watch the progress of this ticket: https://jira.ons.gov.uk/browse/ONSDESYS-319. Thank you.

[sanjeevz3009]

Table of Contents Styling Issue

The issue surfaces when you only have one item in the itemsList, where, when the page is rendered, the ToC single item seems to de-dent itself.

Current behaviour:

Expected behaviour:

Thanks!

[MagdalenaLarge]

Hi @sanjeevz3009 , thank you for highlighting it out to our team. I will keep you posted about the progress.

[sanjeevz3009]

Thanks @MagdalenaLarge