Collapse/expand all details boxes

[Hrovatin]

Description

To hide some "optional" content a details box can be used as follows, which can be opened on demand:

Title

Details

by default, one wants to have details hidden to reduce amount of content. However, I have the habit of exporting blogs to PDFs so that I can underline and add comments when reading. In this case closed boxes are not good as one looses info. So Ideally one could easily expand all boxes before printing. This can be done with the following button, added directly to markdown of the post.

<button id="toggleDetails" style="border-radius: 7px; box-shadow: none; padding: 10px;">Expand/Collapse details</button>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var detailsElements = document.querySelectorAll("details");
    var toggleButton = document.getElementById("toggleDetails");

    toggleButton.addEventListener("click", function() {
        var allOpen = Array.from(detailsElements).every(details => details.open);
        detailsElements.forEach(function(details) {
            details.open = !allOpen;
        });
    });
});
</script>

If anyone knows how to incorporate this in chirpy and make it more elegant, to reduce repetition, that would be very appreciated.

[tis-starlight]

This can be achieved in several ways:

1. Make the <details> element open by default, allowing the user to collapse it by clicking.

<details open>
  <summary>Expand/Collapse details</summary>
  <p>some text</p>
</details>

2. Include the <button> element and the toggle-details.js script in the post where you want the toggle functionality to be enabled.

• Create a toggle-details.js script containing the code and place it under /assets/js/toggle-details.js :

document.addEventListener('DOMContentLoaded', function () {
  var detailsElements = document.querySelectorAll('details');
  var toggleButton = document.getElementById('toggleDetails');

  toggleButton.addEventListener('click', function () {
    var allOpen = Array.from(detailsElements).every((details) => details.open);
    detailsElements.forEach(function (details) {
      details.open = !allOpen;
    });
  });
});

• Add the <button> element and script to the post:

<!-- some post content -->

<button id="toggleDetails" style="border-radius: 7px; box-shadow: none; padding: 10px;">Expand/Collapse details</button>
<script src="/assets/js/toggle-details.js" defer></script>

3. Global implementation

• Create the toggle-details.js script as mentioned in the previous method.
• Create a metadata-hook.html file (if you don’t have one already) and place it under /_includes/metadata-hook.html.
• Add the toggle-details.js script to the metadata-hook.html :

<script src="/assets/js/toggle-details.js" defer></script>

With this, you no longer need to add the script to each post. You only need to include the <button> element to enable the toggle functionality.

---

Additionally, If you export blogs to PDFs, you should consider looking into Obsidian and Pandoc.

[Hrovatin]

Thank you very much. I will try it in the next days.