How can I change css attributes once a button is pressed?

[Jakob Schwichtenberg]

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";
  }
}

[BurningTreeC]

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

[Jakob]

This is really clever. Thanks a lot!

[Mat]

Another approach would be to create a stylesheet tiddler with all the to-be-invidible classes defined, i.e

tags: $:/tags/Stylesheet
type: text/css
text:
.class1, .class2, .class3, ......... {
  display:none;
}

And then use a button to toggle the "$:/tags/Stylesheet"-tag on this stylesheet:

<$reveal type="match" state="aa!!tags" text="">
  <$button set="aa!!tags" setTo="$:/tags/Stylesheet">Hide</$button>
</$reveal>
<$reveal type="match" state="aa!!tags" text="$:/tags/Stylesheet">
  <$button set="aa!!tags" setTo="">Show</$button>
</$reveal>

<:-)