56 lines
1.8 KiB
HTML
56 lines
1.8 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Zk | [no subject]</title>
|
|
<link rel="stylesheet" type="text/css" href="/style.css" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<meta charset="utf-8" />
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1>Zk | [no subject]</h1>
|
|
</header>
|
|
<article class="content">
|
|
<p>Wagh! Got my first Christmas presents! Kinda hammers home just how close the holidays really are. They're sitting under my wreath (since we were all going home, we skipped the whole tree thing) looking tempting</p>
|
|
<span class="control">Expand all</span>
|
|
</article>
|
|
<footer>
|
|
<p>Page generated on 2005-12-21 21:05:34</p>
|
|
</footer>
|
|
</main>
|
|
<script type="text/javascript">
|
|
document.querySelectorAll('li').forEach(el => {
|
|
if (el.querySelectorAll('li').length !== 0) {
|
|
el.classList.add('has-nested', 'closed');
|
|
el.innerHTML = `<span class="toggle"></span> ${el.innerHTML}`;
|
|
}
|
|
});
|
|
document.querySelectorAll('.toc .has-nested').forEach(el => {
|
|
el.classList.remove('has-nested', 'closed');
|
|
});
|
|
document.querySelectorAll('li.has-nested').forEach(el => {
|
|
el.querySelector('.toggle').addEventListener('click', () => {
|
|
el.classList.toggle('closed');
|
|
});
|
|
});
|
|
let expanded = false;
|
|
document.querySelector('.control').addEventListener('click', (e) => {
|
|
expanded = !expanded;
|
|
if (expanded) {
|
|
e.target.innerText = 'Collapse all';
|
|
} else {
|
|
e.target.innerText = 'Expand all';
|
|
}
|
|
document.querySelectorAll('.has-nested').forEach((el) => {
|
|
if (expanded) {
|
|
el.classList.remove('closed');
|
|
} else {
|
|
el.classList.add('closed')
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|