you can put your javascript into a widget - there is a little bit of boiler-plate -
put the code below into a tiddler with fields ‘type’ = ‘application/javascript’ and ‘module-type’ = ‘widget’, the name of the tiddler is not important.
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var Widget = require("$:/core/modules/widgets/widget.js").widget;
var meunOpenWidget = function(parseTreeNode,options) {
this.initialise(parseTreeNode,options);
};
/*
Inherit from the base widget class
*/
meunOpenWidget.prototype = new Widget();
/*
Render this widget into the DOM
*/
meunOpenWidget.prototype.render = function(parent,nextSibling) {
this.computeAttributes();
this.execute();
};
/*
Compute the internal state of the widget
*/
meunOpenWidget.prototype.execute = function() {
};
/*
Refresh the widget by ensuring our attributes are up to date
*/
meunOpenWidget.prototype.refresh = function(changedTiddlers) {
return true;
};
/*
Invoke the action associated with this widget
*/
meunOpenWidget.prototype.invokeAction = function(triggeringWidget,event) {
/************************* your code **********************/
const listItem = event.target.closest('li');
console.log("called",event)
if (listItem) {
const childList = listItem.querySelector('ul');
if (childList) {
listItem.classList.toggle('open');
}
}
/************************************************************/
return true; // Action was invoked
};
exports["action-menuopen"] = meunOpenWidget;
})();
Then in another (standard) tiddler goes the html and css:
\define clickactions()
<$action-menuopen />
\end
<style>
.collapsible-list ul {
display: none;
}
.collapsible-list .open > ul {
display: block;
}
.collapsible-list li {
cursor: pointer;
}
.collapsible-list ul ul {
margin-left: 20px;
}
</style>
<$eventcatcher $click=<<clickactions>> >
<ul class="collapsible-list">
<li>(Click Me) Bullet Point 1
<ul>
<li>Sub Bullet Point 1.1
<ul>
<li>Sub Sub Bullet Point 1.1.1</li>
<li>Sub Sub Bullet Point 1.1.2</li>
</ul>
</li>
<li>Sub Bullet Point 1.2</li>
</ul>
</li>
<li>Main Bullet Point 2
<ul>
<li>Sub Bullet Point 2.1
<ul>
<li>Sub Sub Bullet Point 2.1.1</li>
<li>Sub Sub Bullet Point 2.1.2
<ul>
<li>Sub Sub Sub Bullet Point 2.1.2.1</li>
<li>Sub Sub Sub Bullet Point 2.1.2.2</li>
</ul>
</li>
</ul>
</li>
<li>Sub Bullet Point 2.2</li>
</ul>
</li>
</ul>
</$eventcatcher>
button