# Hide - show a group element

**URL:** <https://discourse.nodered.org/t/hide-show-a-group-element/85154>\
**Category:** General\
**Created:** [2 February 2024 19:01 UTC](https://discourse.nodered.org/t/hide-show-a-group-element/85154 "2024-02-02T19:01:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![lucianv](https://avatars.discourse-cdn.com/v4/letter/l/cab0a1/32.png) [@lucianv](https://discourse.nodered.org/u/lucianv)\
**Post date:** [2 February 2024 19:01 UTC](https://discourse.nodered.org/t/hide-show-a-group-element/85154/1 "2024-02-02T19:01:34Z")

</div>

Hi all,  
I am using this code on a button and is working

> {  
> "group": {  
> "hide": [  
> "tab\_group1"  
> ],  
> "show": [  
> "tab\_group2"  
> ]  
> }  
> }

How can I control show / hide only of one or more elements from a group and not the entire group?  
Thank you

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [2 February 2024 19:29 UTC](https://discourse.nodered.org/t/hide-show-a-group-element/85154/2 "2024-02-02T19:29:41Z")

</div>

You could apply a class to the element then use ui-template to make hidden or visable using css visibility.  
A simple example

```auto
[{"id":"c6152db61102bae1","type":"ui_text","z":"d1395164b4eec73e","group":"2d4fe667.28f8ba","order":15,"width":0,"height":0,"name":"","label":"text","format":"this 1","layout":"row-spread","className":"my_unique_css1","style":false,"font":"","fontSize":16,"color":"#000000","x":330,"y":6280,"wires":[]},{"id":"91956ae1c259e061","type":"ui_text","z":"d1395164b4eec73e","group":"2d4fe667.28f8ba","order":2,"width":0,"height":0,"name":"","label":"text","format":"this 2","layout":"row-spread","className":"my_unique_css2","style":false,"font":"","fontSize":16,"color":"#000000","x":330,"y":6320,"wires":[]},{"id":"a1ebf87ee3fc6107","type":"ui_template","z":"d1395164b4eec73e","group":"2d4fe667.28f8ba","name":"","order":3,"width":0,"height":0,"format":"<style>\n .my_unique_css1{\n visibility: {{msg.payload}};\n }\n </style>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":380,"y":6220,"wires":[[]]},{"id":"8ef4f92e3353c307","type":"ui_button","z":"d1395164b4eec73e","name":"","group":"2d4fe667.28f8ba","order":17,"width":0,"height":0,"passthru":false,"label":"hide","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"hidden","payloadType":"str","topic":"topic","topicType":"msg","x":110,"y":6220,"wires":[["a1ebf87ee3fc6107"]]},{"id":"3028f817b6dada9c","type":"ui_button","z":"d1395164b4eec73e","name":"","group":"2d4fe667.28f8ba","order":3,"width":0,"height":0,"passthru":false,"label":"show","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"visible","payloadType":"str","topic":"topic","topicType":"msg","x":110,"y":6260,"wires":[["a1ebf87ee3fc6107"]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"18","collapse":false,"className":""},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

---

<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:** [2 May 2024 19:30 UTC](https://discourse.nodered.org/t/hide-show-a-group-element/85154/3 "2024-05-02T19:30:16Z")

</div>

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