36 lines
1.1 KiB
Text
36 lines
1.1 KiB
Text
<ul class="control | cluster" aria-label="{{ meta.details.aria }}">
|
|
<button id="expandAll" class="button post-tag">{{ meta.details.expand }}</button>
|
|
<button id="collapseAll" class="button post-tag">{{ meta.details.collapse }}</button>
|
|
</ul>
|
|
|
|
{% for item in itemList %}
|
|
<details id="{{ item.data.title | slugify }}">
|
|
<summary>{{ item.data.title }}</summary>
|
|
{{ item.templateContent | safe }}
|
|
</details>
|
|
{% endfor %}
|
|
|
|
<script>
|
|
const expandAllButton = document.querySelector('#expandAll');
|
|
const collapseAllButton = document.querySelector('#collapseAll');
|
|
const details = document.querySelectorAll('details');
|
|
|
|
expandAllButton.addEventListener('click', () => {
|
|
details.forEach(detail => (detail.open = true));
|
|
});
|
|
|
|
collapseAllButton.addEventListener('click', () => {
|
|
details.forEach(detail => (detail.open = false));
|
|
});
|
|
|
|
details.forEach(detail => {
|
|
detail.addEventListener('toggle', () => {
|
|
const hash = detail.open ? `#${detail.id}` : '#';
|
|
history.pushState(null, null, hash);
|
|
});
|
|
});
|
|
|
|
const id = window.location.hash.slice(1);
|
|
const detail = document.getElementById(id);
|
|
if (detail) detail.open = true;
|
|
</script>
|