# Collapse/expand (open/close) group via ui\_control

**URL:** <https://discourse.nodered.org/t/collapse-expand-open-close-group-via-ui-control/36461>\
**Category:** Dashboard\
**Created:** [24 November 2020 15:43 UTC](https://discourse.nodered.org/t/collapse-expand-open-close-group-via-ui-control/36461 "2020-11-24T15:43:36Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![adm](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adm/32/32566_2.png) [@adm](https://discourse.nodered.org/u/adm)\
**Post date:** [24 November 2020 15:43 UTC](https://discourse.nodered.org/t/collapse-expand-open-close-group-via-ui-control/36461/1 "2020-11-24T15:43:37Z")

</div>

Hi,  
I'm trying to use the newly added function (since dashboard version 2.20.0) to expand/collapse groups via open/close command with the similar syntax as used for show/hide.  
(according to this post: [https://discourse.nodered.org/t/collapse-group-using-ui-control/21997/5](https://discourse.nodered.org/t/collapse-group-using-ui-control/21997/5))

unfortunately it doesnt work for me.

hide/show is working with the JSON expression:

> {"group":{"hide":["GER\_ECH\_E4-1.1"]}}

but open/close isnt working with:

> {"group":{"close":["GER\_ECH\_E4-1.1"]}}

Any ideas? The help of the ui\_control node doesnt mention the open/close feature, yet.

Following you can find a flow with an comparison of both (hide/show vs open/close)

```auto
 [
    {
        "id": "4aadf706.9cd248",
        "type": "function",
        "z": "d77ce098.e6c78",
        "name": "open / close",
        "func": "var load = msg.payload\nvar topic = msg.topic\n\n \nif (load === 0){\nmsg =\n {\n payload: { \n \"group\": {\n \"close\": [\n \"GER_ECH_E4-1.1\" \n]\n }}}\n}\nif (load === 1){\n msg =\n {\n payload: { \n \"group\": {\n \"open\": [\n \"GER_ECH_E4-1.1\"\n]\n }}} \n} \n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 2810,
        "y": 1620,
        "wires": [
            [
                "cf96440f.77d3f8"
            ]
        ]
    },
    {
        "id": "cf96440f.77d3f8",
        "type": "ui_ui_control",
        "z": "d77ce098.e6c78",
        "name": "",
        "events": "all",
        "x": 3200,
        "y": 1640,
        "wires": [
            []
        ]
    },
    {
        "id": "3ad49f49.3bef6",
        "type": "inject",
        "z": "d77ce098.e6c78",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "1",
        "payloadType": "num",
        "x": 2590,
        "y": 1580,
        "wires": [
            [
                "4aadf706.9cd248"
            ]
        ]
    },
    {
        "id": "15821998.6f3486",
        "type": "inject",
        "z": "d77ce098.e6c78",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "0",
        "payloadType": "num",
        "x": 2590,
        "y": 1620,
        "wires": [
            [
                "4aadf706.9cd248"
            ]
        ]
    },
    {
        "id": "4f957eae.6cdd2",
        "type": "function",
        "z": "d77ce098.e6c78",
        "name": "show / hide",
        "func": "var load = msg.payload\nvar topic = msg.topic\n\n \nif (load === 0){\nmsg =\n {\n payload: { \n \"group\": {\n \"hide\": [\n \"GER_ECH_E4-1.1\" \n]\n }}}\n}\nif (load === 1){\n msg =\n {\n payload: { \n \"group\": {\n \"show\": [\n \"GER_ECH_E4-1.1\"\n]\n }}} \n} \n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 2810,
        "y": 1680,
        "wires": [
            [
                "cf96440f.77d3f8"
            ]
        ]
    },
    {
        "id": "be94e4da.4d6ca8",
        "type": "inject",
        "z": "d77ce098.e6c78",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "1",
        "payloadType": "num",
        "x": 2590,
        "y": 1680,
        "wires": [
            [
                "4f957eae.6cdd2"
            ]
        ]
    },
    {
        "id": "48d0e960.f6d2c8",
        "type": "inject",
        "z": "d77ce098.e6c78",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "0",
        "payloadType": "num",
        "x": 2590,
        "y": 1720,
        "wires": [
            [
                "4f957eae.6cdd2"
            ]
        ]
    }
] 

```

Node-Red V1.2.2  
Dashboard V2.24.0

Thanks!  
Marco

---

<div class="post-metadata">

**Author:** ![adm](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adm/32/32566_2.png) [@adm](https://discourse.nodered.org/u/adm)\
**Post date:** [26 November 2020 11:49 UTC](https://discourse.nodered.org/t/collapse-expand-open-close-group-via-ui-control/36461/2 "2020-11-26T11:49:41Z")

</div>

No idea?? Anyone??

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [26 November 2020 17:08 UTC](https://discourse.nodered.org/t/collapse-expand-open-close-group-via-ui-control/36461/3 "2020-11-26T17:08:50Z")

</div>

**i try your flow with little change and it's working but with issue :**

 ![ScreenRecorderProject6](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/3/83b859a9e4f607e8c92bb22f41702f2b3badd309.gif)

- if you close the group before hide it , then you show it , it can not be open .
- you have to let it open before hide it

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/7/676d00e0b745ffe37e9f8efaf7e0eb29be541fd3.png)

```auto
[{"id":"3dadcb0.fb1fa36","type":"ui_template","z":"891d9857.40c7e8","group":"4e669598.5ef6dc","name":"nodeRedButton","order":0,"width":"0","height":"0","format":"<!DOCTYPE html>\n<html>\n <head>\n <style>\n .button {\n background-color: #086A87;\n border: none;\n color: white;\n padding: 16px 32px;\n text-align: center;\n text-decoration: none;\n font-size: 16px;\n margin: 3px 1px;\n cursor: pointer;\n border-radius: 4px;\n }\n .button_over:hover {\n background-color: #187A97;\n color: white;\n }\n </style>\n </head>\n <body>\n <a href=\"https://nodered.org/\" target=\"_blank\" class=\"button button_over\">Node-Red Home</a>\n </body>\n </html>\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":110,"y":1580,"wires":[["b698ed46.36f2a"]]},{"id":"9a129cc4.88c6d","type":"ui_button","z":"891d9857.40c7e8","name":"","group":"1d5d2d12.f1a4b3","order":0,"width":"0","height":"0","passthru":false,"label":"simpleButton","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":260,"y":1620,"wires":[[]]},{"id":"d448649b.2c87f8","type":"ui_template","z":"891d9857.40c7e8","group":"4e669598.5ef6dc","name":"youtube","order":0,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html>\n<body>\n <iframe width=\"540\" height=\"400\"\nsrc=\"https://www.youtube.com/embed/Fl61uiyRQdM\">\n</iframe> \n</body>\n</html>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":90,"y":1610,"wires":[[]]},{"id":"71910f5a.de751","type":"comment","z":"891d9857.40c7e8","name":"========================== html button ==============================","info":"bouton perso et clic vers site web\n+ iframe d'une video youtube","x":300,"y":1540,"wires":[]},{"id":"947f0972.106f98","type":"function","z":"891d9857.40c7e8","name":"open / close","func":"var load = msg.payload\nvar topic = msg.topic\n\n \nif (load === 0){\nmsg =\n {\n payload: { \n \"group\": {\n \"close\": [\n \"testGroupOpenClose_myHtmlCodeExample\" \n]\n }}}\n}\nif (load === 1){\n msg =\n {\n payload: { \n \"group\": {\n \"open\": [\n \"testGroupOpenClose_myHtmlCodeExample\"\n]\n }}} \n} \n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":220,"y":1710,"wires":[["3af2f2a8.e10d5e"]]},{"id":"3af2f2a8.e10d5e","type":"ui_ui_control","z":"891d9857.40c7e8","name":"","events":"change","x":390,"y":1750,"wires":[[]]},{"id":"4a32a1ca.33e81","type":"inject","z":"891d9857.40c7e8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":80,"y":1690,"wires":[["947f0972.106f98"]]},{"id":"252ab6ac.b090ba","type":"inject","z":"891d9857.40c7e8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":80,"y":1730,"wires":[["947f0972.106f98"]]},{"id":"f8235f2e.7edc3","type":"function","z":"891d9857.40c7e8","name":"show / hide","func":"var load = msg.payload\nvar topic = msg.topic\n\n \nif (load === 0){\nmsg =\n {\n payload: { \n \"group\": {\n \"hide\": [\n \"testGroupOpenClose_myHtmlCodeExample\" \n]\n }}}\n}\nif (load === 1){\n msg =\n {\n payload: { \n \"group\": {\n \"show\": [\n \"testGroupOpenClose_myHtmlCodeExample\"\n]\n }}} \n} \n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":220,"y":1790,"wires":[["3af2f2a8.e10d5e"]]},{"id":"659fc171.c6ecd","type":"inject","z":"891d9857.40c7e8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":80,"y":1770,"wires":[["f8235f2e.7edc3"]]},{"id":"fdcb725.b0f2b9","type":"inject","z":"891d9857.40c7e8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":80,"y":1810,"wires":[["f8235f2e.7edc3"]]},{"id":"b698ed46.36f2a","type":"ui_ui_control","z":"891d9857.40c7e8","name":"","events":"all","x":260,"y":1580,"wires":[["287088db.0cb3a8"]]},{"id":"287088db.0cb3a8","type":"debug","z":"891d9857.40c7e8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":380,"y":1580,"wires":[]},{"id":"4e669598.5ef6dc","type":"ui_group","name":"myHtmlCodeExample","tab":"cf789d38.b69fa","order":1,"disp":true,"width":"10","collapse":true},{"id":"1d5d2d12.f1a4b3","type":"ui_group","name":"nothingGroup","tab":"cf789d38.b69fa","order":2,"disp":true,"width":"8","collapse":true},{"id":"cf789d38.b69fa","type":"ui_tab","name":"testGroupOpenClose","icon":"face","order":14,"disabled":false,"hidden":false}]

```

@dceejay i use the last Dashboard v2.24.1 (i clean cache after updating)

---

<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:** [26 November 2020 19:02 UTC](https://discourse.nodered.org/t/collapse-expand-open-close-group-via-ui-control/36461/4 "2020-11-26T19:02:12Z")

</div>

feel free to raise an issue with the failing test case.

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [26 November 2020 19:22 UTC](https://discourse.nodered.org/t/collapse-expand-open-close-group-via-ui-control/36461/5 "2020-11-26T19:22:18Z")

</div>

i will 😉

---

<div class="post-metadata">

**Author:** ![adm](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adm/32/32566_2.png) [@adm](https://discourse.nodered.org/u/adm)\
**Post date:** [1 December 2020 15:18 UTC](https://discourse.nodered.org/t/collapse-expand-open-close-group-via-ui-control/36461/6 "2020-12-01T15:18:52Z")

</div>

Thanks for your input.

After your post, I tried it the same way and it wasnt working.  
then I renamed my groups and found out it, is not working as long as there is a dot(.) in the group name.

so after renaming the groups is working as long as I first open/close (expand/collapse) the group manually on the UI.

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [1 December 2020 15:24 UTC](https://discourse.nodered.org/t/collapse-expand-open-close-group-via-ui-control/36461/7 "2020-12-01T15:24:59Z")

</div>

Yes, as long as we don't hide the group, it works normally (while waiting for a next fix)

---

<div class="post-metadata">

**Author:** ![adm](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adm/32/32566_2.png) [@adm](https://discourse.nodered.org/u/adm)\
**Post date:** [1 December 2020 15:31 UTC](https://discourse.nodered.org/t/collapse-expand-open-close-group-via-ui-control/36461/8 "2020-12-01T15:31:55Z")

</div>

normally??

If I open a session to the UI via my browser the fist time, I've to manually open/close it once on the UI and then it ist also working via the editor (ui\_control).  
If I dont open/close it manually on the UI once the commands via ui\_control arent working.

but thanks anyway..

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [5 December 2020 19:49 UTC](https://discourse.nodered.org/t/collapse-expand-open-close-group-via-ui-control/36461/9 "2020-12-05T19:49:02Z")

</div>

Try to set your group size from Auto to 10 for example. For me it always works after this change (which will soon be corrected if the setting is on Auto).

```auto
[{"id":"3dadcb0.fb1fa36","type":"ui_template","z":"891d9857.40c7e8","group":"4e669598.5ef6dc","name":"nodeRedButton","order":1,"width":10,"height":"2","format":"<!DOCTYPE html>\n<html>\n <style>\n .button {\n background-color: #086A87;\n border: none;\n color: white;\n padding: 16px 32px;\n text-align: center;\n text-decoration: none;\n font-size: 16px;\n margin: 3px 1px;\n cursor: pointer;\n border-radius: 4px;\n }\n .button_over:hover {\n background-color: #187A97;\n color: white;\n }\n </style>\n <a href=\"https://nodered.org/\" target=\"_blank\" class=\"button button_over\">Node-Red Home</a>\n </html>\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":110,"y":1580,"wires":[["b698ed46.36f2a"]]},{"id":"9a129cc4.88c6d","type":"ui_button","z":"891d9857.40c7e8","name":"","group":"1d5d2d12.f1a4b3","order":1,"width":0,"height":0,"passthru":false,"label":"simpleButton","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":100,"y":1640,"wires":[[]]},{"id":"d448649b.2c87f8","type":"ui_template","z":"891d9857.40c7e8","group":"4e669598.5ef6dc","name":"youtube","order":2,"width":10,"height":6,"format":"<!DOCTYPE html>\n<html>\n <iframe width=\"540\" height=\"400\"\nsrc=\"https://www.youtube.com/embed/ksGeUD26Mw0?list=PLyNBB9VCLmo1hyO-4fIZ08gqFcXBkHy-6\">\n</iframe> \n</html>\n\n<!--\n\n<iframe width=\"725\" height=\"408\" src=\"https://www.youtube.com/embed/ksGeUD26Mw0?list=PLyNBB9VCLmo1hyO-4fIZ08gqFcXBkHy-6\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n\n-->","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":90,"y":1610,"wires":[[]]},{"id":"947f0972.106f98","type":"function","z":"891d9857.40c7e8","name":"open / close","func":"var load = msg.payload\nvar topic = msg.topic\n\n \nif (load === 0){\nmsg =\n {\n payload: { \n \"group\": {\n \"close\": [\n \"testGroupOpenClose_myHtmlCodeExample\" \n]\n }}}\n}\nif (load === 1){\n msg =\n {\n payload: { \n \"group\": {\n \"open\": [\n \"testGroupOpenClose_myHtmlCodeExample\"\n]\n }}} \n} \n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":220,"y":1710,"wires":[["3af2f2a8.e10d5e"]]},{"id":"3af2f2a8.e10d5e","type":"ui_ui_control","z":"891d9857.40c7e8","name":"","events":"change","x":390,"y":1750,"wires":[[]]},{"id":"4a32a1ca.33e81","type":"inject","z":"891d9857.40c7e8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":80,"y":1690,"wires":[["947f0972.106f98"]]},{"id":"252ab6ac.b090ba","type":"inject","z":"891d9857.40c7e8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":80,"y":1730,"wires":[["947f0972.106f98"]]},{"id":"f8235f2e.7edc3","type":"function","z":"891d9857.40c7e8","name":"show / hide","func":"var load = msg.payload\nvar topic = msg.topic\n\n \nif (load === 0){\nmsg =\n {\n payload: { \n \"group\": {\n \"hide\": [\n \"testGroupOpenClose_myHtmlCodeExample\" \n]\n }}}\n}\nif (load === 1){\n msg =\n {\n payload: { \n \"group\": {\n \"show\": [\n \"testGroupOpenClose_myHtmlCodeExample\"\n]\n }}} \n} \n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":220,"y":1790,"wires":[["3af2f2a8.e10d5e"]]},{"id":"659fc171.c6ecd","type":"inject","z":"891d9857.40c7e8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":80,"y":1770,"wires":[["f8235f2e.7edc3"]]},{"id":"fdcb725.b0f2b9","type":"inject","z":"891d9857.40c7e8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":80,"y":1810,"wires":[["f8235f2e.7edc3"]]},{"id":"b698ed46.36f2a","type":"ui_ui_control","z":"891d9857.40c7e8","name":"","events":"all","x":260,"y":1580,"wires":[["287088db.0cb3a8"]]},{"id":"287088db.0cb3a8","type":"debug","z":"891d9857.40c7e8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":380,"y":1580,"wires":[]},{"id":"4e669598.5ef6dc","type":"ui_group","name":"myHtmlCodeExample","tab":"cf789d38.b69fa","order":1,"disp":true,"width":"10","collapse":true},{"id":"1d5d2d12.f1a4b3","type":"ui_group","name":"nothingGroup","tab":"cf789d38.b69fa","order":2,"disp":true,"width":"10","collapse":true},{"id":"cf789d38.b69fa","type":"ui_tab","name":"testGroupOpenClose","icon":"face","order":14,"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:** [4 January 2021 19:49 UTC](https://discourse.nodered.org/t/collapse-expand-open-close-group-via-ui-control/36461/10 "2021-01-04T19:49:05Z")

</div>

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