User story
While browsing an article, I'd like to see different subsections within the table of contents without having to scroll to them.
Background
This functionality expands on the expand/collapse behaviour outlined in T299361 which describes how the ToC should expand and collapse when clicking the section headings. This "pinned" behaviour, on the other hand, gives users the ability to expand and collapse sections explicitly without changing the scroll position on the page (by clicking on the triangle icon "▶" or the section heading).
Pinned section: A pinned section is a top-level section in the ToC that has been explicitly expanded or collapsed by the user by clicking the arrow icon "▶" .
Rationale: Clicking on the arrow icon or the section link on the ToC signals a different intent by the user because it is more deliberate than scrolling and more distinct than clicking the section link.
Design spec
 |  |
| Expanded state | pinned state |
UI Behaviour
"▶" arrow behaviour
| When a section is collapsed | → Clicking the arrow | → Will expand the section |
 |  |  |
Same in reverse.
| When a section is expanded AND active | → Clicking the arrow | → Will collapse the section* |
 |  |  |
Same in reverse.
Prototype
https://di-toc-phase2.web.app/Silver
AC
- Clicking the arrow on a closed section opens it.
- Clicking the arrow on an open section closes it.
- Add unit tests to model the behaviour. A test driven approach is recommended.
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T300167#7740500 |
| 2 | ✅ | T300167#7740500 |
