Details

SPAish spaish.details.* makes the <details> element better, without server-side code.

1. It remembers which <details> were open and restores them across page loads.
2. It auto-opens <details> elements that contain links to the current page.

These are useful for menus, navigation sections, FAQs, or any collapsible content that you want the expanded state to persist across page loads.

Try it out 👏

The menu on the left (or above on mobile) is a set of <details> elements that will remember their open state across page loads.

1️⃣ Try what spaish.details.reopen() does:

• Open the "API" section and
• reload the page.
• Voila, it should still be open!

2️⃣ Try what spaish.details.autoOpen() does:

• Close the "About" section in the menu, and
• click this link to the Changelog.
• It will take you there and automatically open the <details> for "About" because it contains a link to the current page.
• When you come back here, the "About" section will be closed again, since you did not actively open it, but the site linked inside of it was opened.

How To Use

Add the script from the CDN to your page and call spaish.details.reopen():

<script src="https://cdn.jsdelivr.net/npm/@wolframkriesing/spaish@2.1.0/_dist/spaish.min.js"></script>
<script>
  // Simple usage - affects all <details> elements on the page
  spaish.details.reopen();
  // Auto-open <details> elements that contain links to the current page
  spaish.details.autoOpen();
</script>

For more targeted control, you can specify which elements to track:

<script>
  // Do it only for specific DOM nodes, either being an array of selectors
  spaish.details.reopen({nodes: ['#faq-section', '[data-details]']});
  // ... or NodeList, e.g., the result of document.querySelectorAll()
  spaish.details.autoOpen({nodes: document.querySelectorAll('details')});
</script>

Example HTML

<details id="faq-section">
  <summary>Frequently Asked Questions</summary>
  <p>Content that will remember if it was expanded...</p>
</details>

<details class="collapsible-info">
  <summary>More Information</summary>
  <p>This state is also preserved...</p>
</details>

Storage

Open states are stored in sessionStorage using the provided page key:

• Key format: {key} - dialog.reopen
• Stores an array of selectors for currently open details
• Only works within the same browser session

Cross-Page State

Using the same page key across multiple pages allows restoring state even when the URL changes:

// Use the same key on all documentation pages
spaish.details.reopen('docs-menu', ['#navigation-menu', '.sidebar-sections']);

This is useful for maintaining expanded menu states across multiple documentation pages or any site with shared navigation elements.

Auto-Opening Sections

The autoOpen() function automatically opens <details> elements that contain links matching the current page URL. This is especially useful for navigation menus where you want to expand the section containing the current page.

// Auto-open details elements containing current page links
spaish.details.autoOpen(['#navigation', '.sidebar-menu']);

Navigation Use Case

Perfect for navigation structures where each section contains links to related pages:

<details>
  <summary>Documentation</summary>
  <ul>
    <li><a href="/docs/getting-started">Getting Started</a></li>
    <li><a href="/docs/api">API Reference</a></li>
  </ul>
</details>

<details>
  <summary>Examples</summary>
  <ul>
    <li><a href="/examples/basic">Basic Usage</a></li>
    <li><a href="/examples/advanced">Advanced</a></li>
  </ul>
</details>

<script>
  // This will automatically open the section containing the current page
  spaish.details.autoOpen();
</script>

When visiting /docs/api, the "Documentation" section will automatically expand because it contains a link to that page.

Smooth Scrolling on Toggle

The scrollOnToggle() function adds smooth scrolling behavior when <details> elements are toggled open. This helps keep the toggled element in view and provides a better user experience.

// Enable smooth scrolling for all <details> elements
spaish.details.scrollOnToggle();

// Or target specific elements
spaish.details.scrollOnToggle({
  nodes: document.querySelectorAll('.collapsible-sections')
});

// Custom scroll behavior
spaish.details.scrollOnToggle({
  behavior: 'smooth',
  block: 'start',
  inline: 'nearest'
});

Important Notes

• Call reopen() immediately after page load for best results
• Only tracks <details> elements that match your provided selectors
• Uses beforeunload event to capture open states
• Elements not found during restore are safely ignored
• Works with any valid CSS selector
• autoOpen() can be used independently or combined with reopen()

Example with Combined Features

// Complete setup with all features
spaish.details.reopen();
spaish.details.autoOpen();
spaish.details.scrollOnToggle();

This combination provides persistent state, auto-opening for current page links, and smooth scrolling when toggling.