Toggle Class on a Div Using Pure WikiText

#1

I use temporary tiddler with some actions to toggle a class on a div element. This mimics the below JavaScript code in pure WikiText.

  • JS Code
toggle.onclick = () => {
    content.classList.toggle("expanded");
};
  • Html snippet
<button id="toggle">
    Toggle Content
</button>
<div id="content">
Hello TiddlyWiki!
</div>

Request: I am looking for a WikiText script to reproduce the above result on the fly without using temporary tiddler or field! Is this possible?

#2

Why? The recommended approach in TiddlyWiki is to use a tiddler to save the state/class so that it persists across a refresh.

#3

Thank you Saq,

It seems browsers keep data for example those entered in an input box. I was looking to see if we can keep such intermittent data in the same way browsers do!

Yes, this is what I use right now!

#4
  • It would be interesting to know why you have this objective
  • This may be fragile since it would be easy to give more than one html tag the id=“toggle”, targeting a class may be better.

Not without a temporary tiddler, but somewhat minimalist is to use the popup parameter on a button which creates the temp-tiddler and deletes the tiddler on the subsequent click.

  • However inside this solution may be a path to achieving what you want See “conditional css inside the buttons using the popup.”

The display component just tests if the [[tiddlername]has[title]]

Then you choose the tiddler title you use $:/state $:/temp prefixes to determine if its saved or not.

  • I invented a css class based details toggle demo here and the macros here, where I use conditional css inside the buttons using the popup.