# Toggle CSS with Boolean values from Inject

**URL:** <https://discourse.nodered.org/t/toggle-css-with-boolean-values-from-inject/53545>\
**Category:** Dashboard\
**Created:** [11 November 2021 03:21 UTC](https://discourse.nodered.org/t/toggle-css-with-boolean-values-from-inject/53545 "2021-11-11T03:21:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chapanata](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chapanata/32/49019_2.png) [@Chapanata](https://discourse.nodered.org/u/Chapanata)\
**Post date:** [11 November 2021 03:21 UTC](https://discourse.nodered.org/t/toggle-css-with-boolean-values-from-inject/53545/1 "2021-11-11T03:21:13Z")

</div>

Hello, I am testing out a way on trying toggle the visibility of a gauge by using a boolean inject.

I know how to set the display of different classes to none and it works, but I cannot figure out how I would be able to toggle it.

My thought process was to inject a true value that would enable the css and false to disable. But it's not as simple as that.

Here is my flow:

```auto
[{"id":"9d192016.b578b","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"66329fd.c63a66","type":"ui_gauge","z":"9d192016.b578b","name":"","group":"db7e5206.b1ddd","order":0,"width":0,"height":0,"gtype":"gage","title":"Test","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","className":"","x":350,"y":160,"wires":[]},{"id":"2f6b7fec.8cfa2","type":"ui_template","z":"9d192016.b578b","group":"db7e5206.b1ddd","name":"Toggle Visibility","order":1,"width":0,"height":0,"format":"<style>\n .nr-dashboard-cardcontainer{\n display: none;\n }\n \n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":370,"y":240,"wires":[[]]},{"id":"9719bad7.c3e7b8","type":"inject","z":"9d192016.b578b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":150,"y":220,"wires":[["2f6b7fec.8cfa2"]]},{"id":"135a84b0.24f51b","type":"inject","z":"9d192016.b578b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":150,"y":260,"wires":[["2f6b7fec.8cfa2"]]},{"id":"db7e5206.b1ddd","type":"ui_group","name":"Test","tab":"4fc05e71.5ca16","order":2,"disp":false,"width":"6","collapse":false,"className":""},{"id":"4fc05e71.5ca16","type":"ui_tab","name":"Test","icon":"dashboard","disabled":false,"hidden":false}]

```

Any ideas?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [11 November 2021 05:39 UTC](https://discourse.nodered.org/t/toggle-css-with-boolean-values-from-inject/53545/2 "2021-11-11T05:39:48Z")

</div>

I'm not an expert, but.....

The node which you are using to disable the display accepts both the `true` and `false` messages.

Depending on how you want to do it, you send one of the messages to that node and send the other message to a **similar** node which enables the displaying.

But I don't know how to do that.

Hope that helps.

---

<div class="post-metadata">

**Author:** ![Chapanata](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chapanata/32/49019_2.png) [@Chapanata](https://discourse.nodered.org/u/Chapanata)\
**Post date:** [11 November 2021 06:23 UTC](https://discourse.nodered.org/t/toggle-css-with-boolean-values-from-inject/53545/3 "2021-11-11T06:23:49Z")

</div>

I appreciate the help!

I figured out a much easier way to display this in fact. This below post made use of passing a JSON object to UI control and its much easier than what I initially wanted to do.

> [@Hiding group using "ui\_control" node and "button"](https://discourse.nodered.org/t/hiding-group-using-ui-control-node-and-button/8567):
>
> Hi all, I would hide group in my dashboard. I've tried all the solution which I've found in the forum but it still doesn't work. I have a "button" node which sends a JSON message to the "ui\_control" node. The problem probably is the format of the JSON message.I've tried the following format: {group:{hide:["tab\_name\_group\_name\_with\_underscores"],show:["tab\_name\_another\_group"],focus:true}} and {"group":{"hide":["Tab1\_Group\_1"]}} and also {tab:“tab\_name\_with\_underscores”,group:{hide:“group…

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [25 November 2021 06:24 UTC](https://discourse.nodered.org/t/toggle-css-with-boolean-values-from-inject/53545/4 "2021-11-25T06:24:25Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.