[FEATURE] Add function to open all accordions for printing and close …

…all accordions after printing (except those previously opened)

README.md

@@ -86,6 +86,7 @@ A default color scheme for light and dark mode can be found in `src/themes/`.
 - [Stephanie Eckles](https://thinkdobecreate.com)' [Pure CSS Custom Styled Radio Buttons](https://moderncss.dev/pure-css-custom-styled-radio-buttons/)
 - [Manuel Matuzović](https://matuzo.at)'s [Removing list styles without affecting semantics](https://matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics)
 - [David Bushell](https://dbushell.com)'s [CSS Button Styles You Might Not Know](https://dbushell.com/2024/03/10/css-button-styles-you-might-not-know/)
+- [Adrian Roselli](https://adrianroselli.com)'s [Progressively Enhanced HTML Accordion](https://adrianroselli.com/2023/08/progressively-enhanced-html-accordion.html)
 
 ## Browser Support
 

src/js/libs/_accordion.js

@@ -0,0 +1,40 @@
+export default function accordion () {
+  const BROWSER_WINDOW = window
+
+  const closeAllAccordions = () => {
+    const OPEN_ACCORDION_ELS = document.querySelectorAll('details[open]')
+
+    OPEN_ACCORDION_ELS.forEach((openAccordionEl) => {
+      openAccordionEl.removeAttribute('open')
+    })
+  }
+
+  const openAllAccordions = () => {
+    const OPEN_ACCORDION_ELS = document.querySelectorAll('details')
+
+    OPEN_ACCORDION_ELS.forEach((openAccordionEl) => {
+      openAccordionEl.setAttribute('open', '')
+    })
+  }
+
+  /**
+   * Expand all accordions for printing, restore previously opened accordions
+   * after printing
+   *
+   */
+  let openAccordionEls
+
+  BROWSER_WINDOW.addEventListener('beforeprint', () => {
+    openAccordionEls = document.querySelectorAll('details[open]')
+
+    openAllAccordions()
+  })
+
+  BROWSER_WINDOW.addEventListener('afterprint', () => {
+    closeAllAccordions()
+
+    openAccordionEls.forEach((openAccordionEl) => {
+      openAccordionEl.setAttribute('open', '')
+    })
+  })
+}

src/js/ratata.js

@@ -9,6 +9,17 @@ if (document.querySelector('.btn--color-scheme-switch') !== null) {
     })
 }
 
+/**
+ * Accordion
+ *
+ */
+if (document.querySelector('.accordion') !== null) {
+  import('./libs/_accordion.js')
+    .then(({ default: accordion }) => {
+      accordion()
+    })
+}
+
 /**
  * Share button
  *