Expand/Collapse details for all articles

[luben]

It would be great if there are buttons to expand/collapse all articles. Also if there is a setting to change the default to "expanded" it would be great.

[chuanqisun]

Hi @luben, thanks again for providing all the feedback to this tool. I have a couple of technical designs in mind:

1. Provide unobtrusive keyboard shortcut to expand/collapse all, with no UI buttons.
2. Render all the articles without using the <details><summary> elements. There will be a flat list on the home page.
3. Allowing a custom html renderer so you can provide any HTML you want. The tool will provide data in a standard interface.

Ultimately I want to support No.3 as it enables infinite customizability, but in the short term, how might No.1 and 2 relate to your goal?

[luben]

Yes, flat list or shortcut will solve the problem.

[chuanqisun]

Hi @luben, I added a bit more flexibility to the template. Now you can inject custom javascript to open all the <details> tags. Documentation here: - Customization guide

Create a directory and file includes/before-body-end.html in the root of your repo, then add

<script>
document.querySelectorAll("details").forEach(detail => detail.open = true);
</script>

Please consider this a short-term solution. I find ways to support custom html template.

[onnyyonn]

I added a keybinding (TAB) to toggle expand/collapse all.

var expanded = false;
document.onkeydown=function(e){
  if(e.keyCode == 9) {
    expanded = !expanded;
    document.querySelectorAll("details").forEach(detail => detail.open = expanded);
    return false;
  }
}

[chuanqisun]

Sweet! I also hope to build a few web components so people who may not have strong javascript skills can just copy paste those components into the html and get this functionality.