I’ve seen that most people manage the toggling of content visibility using a variable in the code behind file. Although this works fine, there’s a better way to do it.

When reading the API Docs, I came across the isCollapsed Read Only property, that is present on every view. Using this property we can easily maintain the visibility of content in our layouts, without the need for creating a new variable for it.

Here’s my approach at it, (NativeScript Core: JS)

exports.onToggle = function (args) {
  const page = args.object.page;
  const homePanel = page.getViewById("homePanel");
  homePanel.visibility = homePanel.isCollapsed ? "visible" : "collapse";
};

And here’s the link to Playground Sample: https://play.nativescript.org/?template=play-js&id=07JZ34

Demo:

Hope you find this useful. Do you have a better approach? Let me know in the comments section below :)

Cheers! Happy NativeScripting.