Hi Jakob,
you could create a toggle button like this:
<$button><$list filter="[[$:/state/invisible]is[missing]]
[{$:/state/invisible}match[show]] " emptyMessage="""
<$action-setfield $tiddler="$:/state/invisible" text="show"/>SHOW
""">
<$action-setfield $tiddler="$:/state/invisible" text="hide"/>HIDE
</$list>
</$button>
and then create a stylesheet tiddler (a tiddler tagged $:/tags/Stylesheet)
with this content:
<$reveal state="$:/state/invisible" type="match" text="hide">
.flaggedelements {
display: none;
}
</$reveal>
<$reveal state="$:/state/invisible" type="nomatch" text="hide">
.flaggedelements {
display: block;
}
</$reveal>
This should do what you want without having to use javascript
all the best,
BTC
I want to include a simple button that controls certain css aspects. For
> example, when the button is clicked, all elements with a specific css class
> should be made invisible or visble. How is this possible in TiddlyWiki?
>
> Using standard JavaScript I would add a html button:
>
> <button onclick="toggleelements()">Toggle Elements</button>
>
>
> and then use a function like
>
> function toggleelements() {
> var x = document.getElementsByClassName("flaggedelements");
> if (x.style.display === "block") {
> x.style.display = "none";
> } else {
> x.style.display = "block";
> }
> }
>
>
>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/20951d72-9213-4319-9bdc-4b2f11c37346%40googlegroups.com.
