== User Story
As a reader, I want to be able to see a shorter version of the ToC so that I can scan it more quickly
== Design Spec
NOTE: The implementation should accommodate the option of having either collapsed or expanded as the default state.
**TLDR;** We want 3 states: expanded, pinned and collapsed.
| {F34923415, width=200} | {F34923419, width=210} | {F34924613, width=200 }
| collapsed state | expanded state | "Human history" in a pinned state
- When a section is **collapsed**, all of its subsections are hidden and the arrow is sideways ▶.
- When a section is **expanded**, all of its subsections are visible and the arrow is pointing down ▼.
- When a section is **pinned**, it is expanded without being "active" (i.e. bold & corresponding to scroll position).
- Collapsing/expanding behaviour only applies to top-level sections.
=== UI Behaviour
**When scrolling**
- When a section is "active" the section should expand automatically
- All other sections that have been expanded via clicking a link or scrolling should collapse.
**When clicking on a section link**
- The section should be "active" (scroll to corresponding section and bolden link)
- The section should expand
- All other sections that have been expanded via clicking a link or scrolling should collapse.
**When clicking on the arrow** ▶
Clicking on the arrow is distinct from clicking on the link because it requires a high degree of intentionality (and precision) on the users behalf. This extra effort will not go unrewarded!
Clicking on the arrow will put the section in a **pinned** state:
- The section will expand.
- The scroll position will not change.
- The section will not receive an "active" state.
- When scrolling, other sections will expand and collapse, but the pinned section will remain expanded.
- Closing the section via the arrow will put the section back in the default collapsed state (i.e. there is no pinned collapsed state where the section would remain collapsed indefinitely).
This feature allows for multiple sections to be expanded at once.
== Prototype
https://di-toc-phase2.web.app/Moon
=== A11Y & I18N considerations
- The arrow should point left for RTL languages when collapsed (◀) and be aligned with the beginning of the text.
- OPEN: Should the "pinned" functionality be exposed to assistive technology? It's only useful in a visual context, and screen-readers have access to all section headings via other means, but it could be useful for keyboard navigation. Aria roles for expanded/collapsed exist, should we use them here?
== Acceptance Criteria
[] Sections will have the ability to collapse and uncollapse the subsections within them
[] Collapsing and uncollapsing will be achieved by selecting a button adjacent to the section name
[] Sections will be collapsed by default