Collapsible Dashboard UI cards

Adding this flow will make all the cards (groups) in your Dashboard tab collapsible by clicking on its title.

        "id": "6aa52fa6.62dcf",
        "type": "ui_template",
        "z": "3dc8ae0.6cb8152",
        "group": "389342d0.c465ce",
        "name": "Collapsible Card",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<script>\n$(' > p:first-child').attr('class', function(i) {\n    return 'cardTitle';\n});\n$('').attr('class', function(i) {\n    return 'card';\n});\n$( '.cardTitle' ).click(function() {\n    $(this).next('.card').slideToggle(600);\n    setTimeout(\n  function() \n  {\n   $(window).trigger('resize');\n   console.log(\"wawa\");\n  }, 700);\n    \n});\n\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 565,
        "y": 1815,
        "wires": [
        "id": "389342d0.c465ce",
        "type": "ui_group",
        "z": "",
        "name": "Other UI",
        "tab": "52aaa596.768b7c",
        "order": 3,
        "disp": true,
        "width": "6"
        "id": "52aaa596.768b7c",
        "type": "ui_tab",
        "z": "",
        "name": "Angular UI templates",
        "icon": "dashboard"

Flow Info

created 1 month, 1 week ago
updated 1 month ago

Node Types

  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x1)


  • dashboard
  • ui
  • collapse
  • collapsible
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option