selectedClass on button just stopped working?

[Petri M.]

Hi,

I have a few buttons that have a different CSS when I click on them, basically something like this

<$button class="sidebar-collapsible" selectedClass="sidebar-collapsible-onclick" set="$:/state/petri/sidebar3" setTo={{{ [{$:/state/petri/sidebar3}match[hide]then[show]else[hide]] }}}>

But I just realised that the selectedClass CSS is never applied to the button. It used to work fine a few weeks back. I did update my wiki to the newest one so maybe that broke something. I checked with Inspect Element and the class "sidebar-collapsible-onclick" is never applied to the button.

The tiddler where this CSS is in is at the bottom of the $:/tags/Stylesheet (when clicking on the tag pill) so that should not be the issue. Besides the rest of the CSS in that tiddler seem to work fine.

Here's the CSS:

/* + mark after collapsing */

.sidebar-collapsible-onclick:after {

    content: "+";

    float:right;

}

Any ideas where to start looking or what might've be the cause of this?

Thanks,

Petri M

[Eric Shulman]

According to the documentation in https://tiddlywiki.com/#ButtonWidget, the `selectedClass` parameter is assigned "if the popup is triggered or the tiddler specified in set already has the value specified in setTo"

However, in your `$button` code, the `setTo` parameter is calculated using a filtered transclusion whose value will always be the opposite of the current value stored in the `$:/state/petri/sidebar3` tiddler.  Thus, the `selectedClass` is never applied.

Are you certain that this used to work "a few weeks back"?

-e

[Petri M.]

Thanks for the comment! But should it not be triggered on the click as well? "If the popup is triggered OR..." I would assume that it should still trigger when the button is clicked, even if the second part is never true? But yes I actually made a post here and you helped me in making this button. It worked just fine, I remember having it all set up and I was pleased.

-Petri

[Petri M.]

Okay I was able to circumvent the issue by using two separate buttons that replace one another when clicked. Actually the exact same thing is used in https://tiddlywiki.com/#ButtonWidget. No clue why I did not do it this way in the beginning.

<$reveal state="$:/state/petri/sidebar1" type="match" text="hide">

<$button class="sidebar-collapsible" set="$:/state/petri/sidebar1" setTo="show">
Title matches:
</$button>

</$reveal>

<$reveal state="$:/state/petri/sidebar1" type="match" text="show">

<$button class="sidebar-collapsible-onclick" set="$:/state/petri/sidebar1" setTo="hide">
Title matches:
</$button>

-Petri