So! I’ve done a bit of brainstorming and playing around with VSCode (and repeatedly asked ChatGPT to fix my errors 
) but I’ve created a non-tiddlywiki html demo of what I think would work if we replaced the vanilla JavaScript with built in TiddlyWiki functionality.
! WARNING !
This demo code does have JavaScript in it, and you should NOT just haphazardly trust code on the internet! but I think most of us are pretty used to that…
But, here’s my experiment, you can just throw this into a .txt file, rename it to .htm or .html (whatever is your cup of tea) and open it in browser to see it in action, or you can copy it into vscode.dev to look at the code itself. Nvm… I forgot TTW just… shows code. My brains a little fried haha…
It uses the html tags to apply the functionality to the paragraphs following the headers to emulate the similar functionality to the details disclosure element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collapsible Headers</title>
<style>
h2 {
border-bottom: solid 1px rgba(128, 128, 128, 0.5); /* <<color muted-foreground>> is what I would use instead imo. This is just for stylistic testing, to see if i could get the border to disappear when collapsed. */
}
h2.closed {
border: none;
}
.collapsible-content {
display: block; /* Default state is open */
padding-left: 20px; /* Indent the content for clarity */
margin: 0;
}
.collapsible-header {
cursor: pointer;
padding: 10px;
margin: 0;
}
.collapsible-header.closed:after {
content:" ...";
color: rgba(128, 128, 128, 0.5); /* <<color muted-foreground>> is what I would use instead imo. */
}
.collapsible-content.collapsed {
display: none;
}
</style>
</head>
<body>
<h1 class="collapsible-header h1-main-header">Main Header</h1>
<div class="collapsible-content p-main-header">
<h2 class="collapsible-header h2-sub-header">Sub Header</h2>
<div class="collapsible-content p-sub-header">
<p>Normal Text Here.</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const headers = document.querySelectorAll('.collapsible-header');
headers.forEach(header => {
header.addEventListener('click', () => {
const isOpen = !header.classList.contains('closed');
toggleContent(header, !isOpen);
header.classList.toggle('closed', isOpen);
});
});
function toggleContent(header, shouldOpen) {
const content = header.nextElementSibling;
if (content) {
content.classList.toggle('collapsed', !shouldOpen);
// Handle nested collapsible content
let nestedContent = content.querySelector('.collapsible-content');
while (nestedContent) {
nestedContent.classList.toggle('collapsed', !shouldOpen);
nestedContent = nestedContent.querySelector('.collapsible-content');
}
}
}
});
</script>
</body>
</html>
I think instead of using the tag type as the tag prefix to accompany collapsible-header/content, just having a sluggified header text with a wikified suffix (sub-header-019357135 … kinda… stuff.)
