# Visibility of individual elements based on dropdown

**URL:** <https://discourse.nodered.org/t/visibility-of-individual-elements-based-on-dropdown/97215>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [22 May 2025 17:00 UTC](https://discourse.nodered.org/t/visibility-of-individual-elements-based-on-dropdown/97215 "2025-05-22T17:00:21Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jussie](https://avatars.discourse-cdn.com/v4/letter/j/a5b964/32.png) [@jussie](https://discourse.nodered.org/u/jussie)\
**Post date:** [22 May 2025 17:00 UTC](https://discourse.nodered.org/t/visibility-of-individual-elements-based-on-dropdown/97215/1 "2025-05-22T17:00:21Z")

</div>

Hello!

I am working on a project in Node-RED (latest version) Dashboard 2.0 (from flowfuse) and I am running into a problem.

I would like to be able to turn the visibility of individual elements (such as text fields or buttons) on or off, for example based on a dropdown selection. But it seems that you can only hide or show entire groups or pages.

Is it possible to hide or show individual elements, and if so, how do I do that?

Thanks in advance for your help!

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [22 May 2025 20:23 UTC](https://discourse.nodered.org/t/visibility-of-individual-elements-based-on-dropdown/97215/2 "2025-05-22T20:23:45Z")

</div>

It is very easy to do so if you use templates define the UI objects in Vue or HTML, and then manipulate in the `script` area of the template

If you want to use the core stock UI nodes, then use `ui_update` messages with appropriate CSS.

---

<div class="post-metadata">

**Author:** ![jussie](https://avatars.discourse-cdn.com/v4/letter/j/a5b964/32.png) [@jussie](https://discourse.nodered.org/u/jussie)\
**Post date:** [23 May 2025 13:46 UTC](https://discourse.nodered.org/t/visibility-of-individual-elements-based-on-dropdown/97215/3 "2025-05-23T13:46:24Z")

</div>

Thanks for your response!  
I can do something with this.  
Can I also find an example flow somewhere?

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [24 May 2025 14:08 UTC](https://discourse.nodered.org/t/visibility-of-individual-elements-based-on-dropdown/97215/4 "2025-05-24T14:08:10Z")

</div>

Here is an example to show/hide a button from a selection list, in both methods

```auto
    {
        "id": "c410ff3cd747e1fa",
        "type": "ui-button",
        "z": "c13589f7d02d4ffe",
        "group": "be4cdfe0774dbbc6",
        "name": "button-1",
        "label": "Button-1",
        "order": 2,
        "width": "2",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 480,
        "y": 520,
        "wires": [
            []
        ]
    },
    {
        "id": "fe7ea034bcab2c8d",
        "type": "ui-template",
        "z": "c13589f7d02d4ffe",
        "group": "",
        "page": "c81900ecf6761ebb",
        "ui": "",
        "name": "Button-1 classes",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": ".omri-hide {\n visibility:hidden !important;\n}\n.omri-show {\n visibility:visible !important;\n}\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "page:style",
        "className": "",
        "x": 210,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "5a9e54d33537ae7d",
        "type": "ui-template",
        "z": "c13589f7d02d4ffe",
        "group": "be4cdfe0774dbbc6",
        "page": "",
        "ui": "",
        "name": "Hide with Template",
        "order": 4,
        "width": "8",
        "height": "3",
        "head": "",
        "format": "<template>\n <div>\n <br>\n <select id=\"visibilityStatus\" class=\"selection-class\" onChange=\"showHide()\" value=\"show\">\n <option value='show'>Show</option>\n <option value='hide'>Hide</option>\n </select>\n <button class=\"button-class\" id=\"button-2\">Button-2</button>\n </div>\n</template>\n<script type=\"text/javascript\" src=\"/NR_WebRoot/tabulator-tables/dist/js/tabulator.min.js\"></script>\n\n<script>\nwindow.showHide = function() {\n const btn = document.getElementById(\"button-2\");\n const sel = document.getElementById(\"visibilityStatus\");\n const selIndex = sel.selectedIndex;\n if (sel.options[selIndex].value === \"hide\")\n btn.style.visibility = \"hidden\";\n else\n btn.style.visibility = \"visible\";}\n</script>\n\n<style>\n .selection-class {\n border: 1px solid black;\n padding:10px;\n }\n .button-class {\n background:#009999;\n color:white;\n width:150px;\n padding:10px;\n margin-left:10px;\n border-radius: 4px;\n }\n</style>\n",
        "storeOutMessages": true,
        "passthru": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 210,
        "y": 560,
        "wires": [
            []
        ]
    },
    {
        "id": "dc74881d4ba3f647",
        "type": "ui-dropdown",
        "z": "c13589f7d02d4ffe",
        "group": "be4cdfe0774dbbc6",
        "name": "",
        "label": "Show/Hide-1",
        "tooltip": "",
        "order": 1,
        "width": "2",
        "height": "1",
        "passthru": false,
        "multiple": false,
        "chips": false,
        "clearable": false,
        "options": [
            {
                "label": "Show",
                "value": "omri-show",
                "type": "str"
            },
            {
                "label": "hide",
                "value": "omri-hide",
                "type": "str"
            }
        ],
        "payload": "",
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "typeIsComboBox": true,
        "msgTrigger": "onChange",
        "x": 190,
        "y": 520,
        "wires": [
            [
                "a6f79843990993b6"
            ]
        ]
    },
    {
        "id": "a6f79843990993b6",
        "type": "function",
        "z": "c13589f7d02d4ffe",
        "name": "function 4",
        "func": "msg.ui_update = {\n class: msg.payload\n };\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 340,
        "y": 520,
        "wires": [
            [
                "c410ff3cd747e1fa"
            ]
        ]
    },
    {
        "id": "be4cdfe0774dbbc6",
        "type": "ui-group",
        "name": "Group 1",
        "page": "c81900ecf6761ebb",
        "width": "4",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "c81900ecf6761ebb",
        "type": "ui-page",
        "name": "Test",
        "ui": "b7fd8a2cce8052cc",
        "path": "/test",
        "icon": "home",
        "layout": "grid",
        "theme": "b7b1935fbb33bbc8",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "b7fd8a2cce8052cc",
        "type": "ui-base",
        "name": "ui7",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-dropdown",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "b7b1935fbb33bbc8",
        "type": "ui-theme",
        "name": "Default theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![jussie](https://avatars.discourse-cdn.com/v4/letter/j/a5b964/32.png) [@jussie](https://discourse.nodered.org/u/jussie)\
**Post date:** [25 May 2025 14:14 UTC](https://discourse.nodered.org/t/visibility-of-individual-elements-based-on-dropdown/97215/5 "2025-05-25T14:14:09Z")

</div>

Thank you very much! This is indeed the solution to the problem!

---

<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:** [8 June 2025 14:14 UTC](https://discourse.nodered.org/t/visibility-of-individual-elements-based-on-dropdown/97215/6 "2025-06-08T14:14:32Z")

</div>

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