# How to hide and show group in dashboard using css or javascript

**URL:** <https://discourse.nodered.org/t/how-to-hide-and-show-group-in-dashboard-using-css-or-javascript/25577>\
**Category:** Dashboard\
**Created:** [26 April 2020 23:29 UTC](https://discourse.nodered.org/t/how-to-hide-and-show-group-in-dashboard-using-css-or-javascript/25577 "2020-04-26T23:29:32Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [26 April 2020 23:29 UTC](https://discourse.nodered.org/t/how-to-hide-and-show-group-in-dashboard-using-css-or-javascript/25577/1 "2020-04-26T23:29:32Z")

</div>

ok, i want to use css to hide and show group in dashboard. Any advice Please!

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [27 April 2020 05:15 UTC](https://discourse.nodered.org/t/how-to-hide-and-show-group-in-dashboard-using-css-or-javascript/25577/2 "2020-04-27T05:15:24Z")

</div>

ok, did you actually search the forum (it probably gave you suggestions before you clicked post) and [read the dashboard documentation](https://github.com/node-red/node-red-dashboard) ?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [27 April 2020 07:20 UTC](https://discourse.nodered.org/t/how-to-hide-and-show-group-in-dashboard-using-css-or-javascript/25577/3 "2020-04-27T07:20:17Z")

</div>

Or look at the ui-control node sidebar info

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [27 April 2020 22:38 UTC](https://discourse.nodered.org/t/how-to-hide-and-show-group-in-dashboard-using-css-or-javascript/25577/4 "2020-04-27T22:38:28Z")

</div>

> [@dceejay](#):
>
> ui-control

this node does not work as expected. when i start node-red and open my dashboard i found the groups that suppose to be hidden. then i have to deploy the flow to execute ui-control node and have the groups hidden

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [27 April 2020 22:42 UTC](https://discourse.nodered.org/t/how-to-hide-and-show-group-in-dashboard-using-css-or-javascript/25577/5 "2020-04-27T22:42:16Z")

</div>

> [@hathemi](#):
>
> i have to deploy the flow to execute ui-control node and have the groups hidden

No you don't.

Read the info (in the side bar info panel) for the ui\_control & you will understand you can get an event when a user opens the dashboard. Add a couple of nodes & smidgen of imagination and you'll soon have a solution. 🙂

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [4 May 2020 16:35 UTC](https://discourse.nodered.org/t/how-to-hide-and-show-group-in-dashboard-using-css-or-javascript/25577/6 "2020-05-04T16:35:16Z")

</div>

well then. this drive me crazy really.  
here's a simple flow  
`[{"id":"d261606.508d0a","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"656793b1.bd0a2c","type":"inject","z":"d261606.508d0a","name":"","topic":"","payload":"{\"group\":{\"hide\":[\"Tab_19_Group_1\"],\"show\":[\"Tab_19_Group_2\"],\"focus\":true}}","payloadType":"json","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":178.5,"y":138,"wires":[["96c0a469.a23028"]]},{"id":"1dbaf7d0.fc03d8","type":"ui_button","z":"d261606.508d0a","name":"","group":"53b1322b.32761c","order":0,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":399.5,"y":185,"wires":[[]]},{"id":"4d9ae582.958f3c","type":"ui_button","z":"d261606.508d0a","name":"","group":"f4ddf0e.05d341","order":0,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":398.5,"y":237,"wires":[[]]},{"id":"96c0a469.a23028","type":"ui_ui_control","z":"d261606.508d0a","name":"","events":"all","x":462.5,"y":119,"wires":[[]]},{"id":"53b1322b.32761c","type":"ui_group","name":"Group 1","tab":"da763946.9d90e8","order":1,"disp":true,"width":6},{"id":"f4ddf0e.05d341","type":"ui_group","name":"Group 2","tab":"da763946.9d90e8","order":2,"disp":true,"width":6},{"id":"da763946.9d90e8","type":"ui_tab","name":"Tab 19","icon":"dashboard","order":19}]`

i need to access to the dashboard [http://192.168.X.X:1880/ui/#!/5?socketid=7BReud7J-5IuuwXnxAAAD](http://192.168.X.X:1880/ui/#!/5?socketid=7BReud7J-5IuuwXnxAAAD) in my phone  
i always get both groups showing.on the first load !!

---

<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:** [3 June 2020 16:35 UTC](https://discourse.nodered.org/t/how-to-hide-and-show-group-in-dashboard-using-css-or-javascript/25577/7 "2020-06-03T16:35:29Z")

</div>

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