zk_html/lj-dump/L-3.html

56 lines
1.9 KiB
HTML

<!doctype html>
<html>
<head>
<title>Zk | Quick note...</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 | Quick note...</h1>
</header>
<article class="content">
<p>Got the LJ pages on my site working, so.. neat. On the side bar there's a LJ Events section with the subjects from the last 10 as links that lead to the individual entries, along with links to the events page with the last 10 in full and soon links to the calendar and whatever. Y'know.. copying and such.</p>
<span class="control">Expand all</span>
</article>
<footer>
<p>Page generated on 2002-08-08 03:55:06</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>