Feature Request: Collapsible Table of Contents with Configurable Default State #8

New issue

Open

opened 2024-12-24 23:37:51 +01:00 by Aroy · 0 comments

Aroy commented

2024-12-24 23:37:51 +01:00

Owner

Description:

I'd like to request a feature enhancement for the Table of Contents (ToC) in the theme. Specifically, I’d like to make the ToC collapsible using Bootstrap 5’s built-in collapse component, with the ability to configure its default state (expanded or collapsed) via the configuration.

Features:

Collapsible ToC:
- Use Bootstrap 5’s collapse component to make the ToC collapsible and expandable.
- The user can toggle the visibility of the ToC with a button.
Configurable Default State:
- Allow the default state of the ToC (collapsed or expanded) to be controlled via a configuration setting (toc_default_state).
- This setting can be defined globally in config.toml or on a per-page basis in the front matter.
Button Text Update:
- The button should dynamically change text based on whether the ToC is collapsed or expanded (e.g., "Show Table of Contents" / "Hide Table of Contents").

Example Implementation:

HTML:

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#toc-container" aria-expanded="false" aria-controls="toc-container">
  Show Table of Contents
</button>
<div id="toc-container" class="collapse">
  {{ .Page.TableOfContents }}
</div>

JavaScript:

document.addEventListener('DOMContentLoaded', function () {
  const tocState = "{{ .Site.Params.toc_default_state }}";
  const tocContainer = document.getElementById('toc-container');
  const toggleButton = document.querySelector('[data-bs-target="#toc-container"]');

  if (tocState === 'expanded') {
    new bootstrap.Collapse(tocContainer, { toggle: true });
    toggleButton.setAttribute('aria-expanded', 'true');
    toggleButton.textContent = 'Hide Table of Contents';
  } else {
    new bootstrap.Collapse(tocContainer, { toggle: false });
    toggleButton.setAttribute('aria-expanded', 'false');
    toggleButton.textContent = 'Show Table of Contents';
  }
});

Config:

[params]
  toc_default_state = "collapsed"  # or "expanded"

Why this is useful:

Reduces clutter by allowing users to hide the ToC on long pages.
Provides a clean, accessible, and responsive user interface with Bootstrap 5’s collapse component.
Offers flexibility in design, enabling a site-wide or page-specific configuration.

**Description:** I'd like to request a feature enhancement for the Table of Contents (ToC) in the theme. Specifically, I’d like to make the ToC collapsible using Bootstrap 5’s built-in collapse component, with the ability to configure its default state (expanded or collapsed) via the configuration. **Features:** 1. **Collapsible ToC**: - Use Bootstrap 5’s collapse component to make the ToC collapsible and expandable. - The user can toggle the visibility of the ToC with a button. 2. **Configurable Default State**: - Allow the default state of the ToC (collapsed or expanded) to be controlled via a configuration setting (`toc_default_state`). - This setting can be defined globally in `config.toml` or on a per-page basis in the front matter. 3. **Button Text Update**: - The button should dynamically change text based on whether the ToC is collapsed or expanded (e.g., "Show Table of Contents" / "Hide Table of Contents"). **Example Implementation:** - **HTML**: ```html <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#toc-container" aria-expanded="false" aria-controls="toc-container"> Show Table of Contents </button> <div id="toc-container" class="collapse"> {{ .Page.TableOfContents }} </div> ``` - **JavaScript**: ```js document.addEventListener('DOMContentLoaded', function () { const tocState = "{{ .Site.Params.toc_default_state }}"; const tocContainer = document.getElementById('toc-container'); const toggleButton = document.querySelector('[data-bs-target="#toc-container"]'); if (tocState === 'expanded') { new bootstrap.Collapse(tocContainer, { toggle: true }); toggleButton.setAttribute('aria-expanded', 'true'); toggleButton.textContent = 'Hide Table of Contents'; } else { new bootstrap.Collapse(tocContainer, { toggle: false }); toggleButton.setAttribute('aria-expanded', 'false'); toggleButton.textContent = 'Show Table of Contents'; } }); ``` - **Config**: ```toml [params] toc_default_state = "collapsed" # or "expanded" ``` **Why this is useful:** - Reduces clutter by allowing users to hide the ToC on long pages. - Provides a clean, accessible, and responsive user interface with Bootstrap 5’s collapse component. - Offers flexibility in design, enabling a site-wide or page-specific configuration.