Help! A way to toggle details elements?

#1

Hi everyone

I have a writing set up in which I would like to produce content in both static html and pdf. In the pdfs I would like to have all the details elements open by default, and in the static htmls I would like to have all the details elements closed by default.

Would there be a way to have a button or pair of buttons from the sidebar that toggles all the details elements in a Tiddlywiki file open and closed?

But I would like a solution that lets the details elements be regular details elements rather than buttons, because buttons don’t work in static htmls. That is, the sidebar button won’t be visible in the static html, so that button can be a button. But the details elements themselves in the tiddler need to be able to open and close from a static html.

Thanks in advance for any help.

1 Like
#2

I’m not sure what you mean by “PDF”. Do you mean that you intend to print to a PDF file?

If you do print, do you print from the original TW file, or from the static page.

Either way, I think this will require javascript. Hmm. Although, if the details are created by a macro, it might be possible to pre-determine if they are default closed or opened.

#3

Hi Mark,

I would print as a pdf file from the original TW file. So to generate the pdf I would toggle the details open, and to generate the static file I would toggle it not open.

#4

Dave, I achieve something similar by creating my details elements via a macro, and passing in the open/closed state as a parameter on the $macrocall widget. The details element takes a boolean attribute to determine its open/closed status.

You can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its open attribute. Unfortunately, at this time there’s no built-in way to animate the transition between open and closed.

$__jenn_templatesView_journal.json (2.8 KB)

My buttons look like this:

		<$button>
			<$action-setfield $tiddler="$:/jenn/states/journalDetails" text="open"/>
			{{$:/core/images/preview-open}} Open 
		</$button>
		<$button>
			<$action-setfield $tiddler="$:/jenn/states/journalDetails" text=""/>
			<$action-setfield $tiddler="$:/temp/trigger" $value=<<now "0hh:0mm:0ss">>/>
			{{$:/core/images/preview-closed}} Close 
		</$button>

My situation is scoped to a single rather complicated tiddler, not my whole wiki, but maybe this can be of some use to you.

#5

Hmmm looks interesting! Gonna take a lot of tweaking…

Maybe there is a way for me to drag out my old Subsume Plugin from last summer (The Subsume Plugin — Turn links into sliders!) and tweak it in some way for this.

1 Like
#6

Forgot to add, Thank you for sharing this, Jennifer!

1 Like
#7

Yes! Got it!

I added the Subsume plugin, made the changes to the macro, then cloned it and added ‘open’ to the details element.

Then in the sidebar I added this copy-paste-tweak from TiddlyWiki.com. I’m sure someone with more experience could make it one button instead of four, but at least I can toggle details elements now!

<$fieldmangler tiddler="$:/plugins/giffmex/subsume/macro/closed">
Closed - yes <$button message="tm-add-tag" param="$:/tags/Macro">{{$:/core/images/new-button}}</$button>
<br>
Closed no <$button message="tm-remove-tag" param="$:/tags/Macro">{{$:/core/images/delete-button}}</$button>
</$fieldmangler><br>
<$fieldmangler tiddler="$:/plugins/giffmex/subsume/macro/open">
Open yes <$button message="tm-add-tag" param="$:/tags/Macro">{{$:/core/images/new-button}}</$button>
<br>
Open no <$button message="tm-remove-tag" param="$:/tags/Macro">{{$:/core/images/delete-button}}</$button>
</$fieldmangler>
1 Like