Nice idea implementing it as an actionwidget and using eventcatcher. Here is a share site link containing @buggyj’s code for anyone who wants to try it without having to do the work of creating the tiddlers (and reloading the wiki to get the javascript to take effect).
Super interesting! Thank you so much for this. Very cool.
I can definitely work with this.
Following @arunnbabu81 question, is there any way to make use of this without needing the html/css?
yes you could reduction the risk of ‘chevron blindness’ by rewriting the wikitext like so (the css is not needed as such)"
<$eventcatcher $click="<$action-menuopen/>" >
@@.collapsible-list
*(Click Me) Bullet Point 1
**Sub Bullet Point 1.1
***Sub Sub Bullet Point 1.1.1
***Sub Sub Bullet Point 1.1.2
**Sub Bullet Point 1.2
*Main Bullet Point 2
**Sub Bullet Point 2.1
***Sub Sub Bullet Point 2.1.1
***Sub Sub Bullet Point 2.1.2
****Sub Sub Sub Bullet Point 2.1.2.1
****Sub Sub Sub Bullet Point 2.1.2.2
**Sub Bullet Point 2.2
@@
</$eventcatcher>
A feature of this approach is the state of open element of the list is not maintained - if you close the tiddler and reopen it the list will be completely closed.
I wonder if we can slip in a child indicator? So we know when to click.
I am trying to package this but when I move the style out of the tiddler to one tagged $:/tags/Stylesheet is stops working, Odd?
It works for me.
with chrome you can do this with the css
.collapsible-list ul {
display: none;
position: relative;
list-style: none;
}
.collapsible-list {
list-style: none;
}
.collapsible-list .open > ul {
display: block;
position: relative;
list-style: none;
}
.collapsible-list li:not(:has(ul)) {
cursor: default;
}
.collapsible-list li:not(:has(ul)) {
cursor: default;
}
.collapsible-list li:has(ul)::before {
content: '⯈';
}
.collapsible-list li.open:has(ul)::before {
content: ' ⯆';
}
.collapsible-list li:not(:has(ul))::before {
content: '⏺';
}
.collapsible-list ul ul {
margin-left: 20px;
}
but not yet on firefox
See this wiki.. I tried to create a view toolbar button to switch to a custom View Template Body Cascade to make the bullets collapsible. But its not working - check this demo. Press on this 
button
in the viewtoolbar to switch to the custom View Template Body Cascade. This is the template I used for the cascade. All the relevant tiddlers are listed in the homepage. Can someone debug it ?
Check in chrome only. I have added the javascript widget and CSS shared by buggyj already and its working outside my View Template Body Cascade - here is the demo
The problem is that this styling in wikitext does not always work, eg:
@@.collapsible-list
{{listdynamicexpample}}
@@
You cannot use transclusion here. The only solution is to use javascript macro.
Is it possible to use javascript macro with the view template body cascade ?
They can be used where wikitext macros are used. Generally the javascript one uses in a macro is very simple.
here is the macro I wrote for this:
/*\
title: bj/macros/stylethis.js
type: application/javascript
module-type: macro
\*/
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
/**** name of macro and parameters ****/
exports.name = "styleThis";
exports.params = [
{name: "aclass"},
{name: "tid"}
];
/***************macro********************/
exports.run = function(aclass, tid) {
var content = $tw.wiki.getTiddlerText(tid);
return `
@@.${aclass}
${content}
@@
`
};
/***************************************/
you use it like this:
use it like this:
<$eventcatcher $click="<$action-menuopen/>" >
<$macrocall $name="styleThis" aclass= ".collapsible-list" tid=<<currentTiddler>>/>
</$eventcatcher>
1 Like
Wow. Thanks @buggyj . It works perfectly now. I have updated the demo wiki including the latest code you shared.
@switchplayer
I will share the tiddlers needed today night once I am back home. Everything except the icon for the viewtoolbar button is in the home page of that wiki…you can try those.the icon tiddlers can be searched in the wiki using command palette plug in (control plus P). I forgot it’s title. Title can be seen within the button tiddler
https://sidetabs-wiki.tiddlyhost.com/#Collapsible%20outliner%20installation
@switchplayer Check this tiddler for adding the macro given by @buggyj
Have you seen Introducing a Copy Code Button Plugin for TiddlyWiki: Enhancing Code Sharing and Efficiency?
That’s a button do the similar thing. but it requires additional click to trigger. it won’t automatically execute on any tiddler with a certain tag.
@buggyj Is this because the Firefox browser doesn’t support it. Any chance of this working in Firefox in the future (bcos I use TW mostly in firefox)
It is part of standard level 4 css - firefox say they will release it soon - but I don’t know when. Is it a useful feature?
@buggyj It differs from person to person. People who have used outliner apps like dynalist, workflowy, roma research, logseq, remnote etc. might like it, especially if they use long text tiddlers frequently.
Awesome! Thank you!
All these replies and comments have been amazing and super helpful. Very appreciative of everyone!
Interesting…I installed it in my wiki, but one of two things happen - i receive an uncaught error message OR when I click the button in the viewtoolbar, it hides the entire body of the tiddler.
@arunnbabu81 any ideas on the reasons for this?