Collapsible Dashboard UI cards v2

Adding this flow will make all the cards (groups) in your Dashboard tab collapsible by clicking on its title. Now preserves the card's width.

[
    {
        "id": "6aa52fa6.62dcf",
        "type": "ui_template",
        "z": "3dc8ae0.6cb8152",
        "group": "115a1f02.ba9291",
        "name": "Collapsible Card",
        "order": 8,
        "width": 0,
        "height": 0,
        "format": "<script>\n$(document).on('ready', function(){\n    $('div.nr-dashboard-cardpanel > p:first-child').addClass('cardTitle');\n    $('div.nr-dashboard-cardcontainer').addClass('card');\n    $( '.cardTitle' ).click(function() {\n        var newwidth = $(this).css(\"width\");\n        $(this).css(\"width\",newwidth);\n        $(this).next('.card').slideToggle(600);\n        setTimeout(function() {$(window).trigger('resize');}, 700);\n    });\n})\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 260,
        "y": 2440,
        "wires": [
            []
        ]
    },
    {
        "id": "115a1f02.ba9291",
        "type": "ui_group",
        "z": "",
        "name": "Sliders",
        "tab": "52aaa596.768b7c",
        "order": 2,
        "disp": true,
        "width": "6"
    },
    {
        "id": "52aaa596.768b7c",
        "type": "ui_tab",
        "z": "",
        "name": "Angular UI templates",
        "icon": "dashboard"
    }
]
Hugobox

Flow Info

created 1 year, 1 month ago
updated 11 months, 2 weeks ago

Node Types

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

Tags

  • 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