Easy technique for toggling a container body on/off

Let's say you have a container with a header like this:

Click the Hide Filters button to get this:

Very easy to do, the button does all the work without the need to temp variables.

Place your button anywhere (in the header makes sense) and set it's Text property to {{conFilter.showBody ? "Hide Filters" : "Show Filters"}} where conFilter is the name of your container:

image

This will change the text of the button to toggle between 'Hide' or 'Show'.

Next set a click handler on your button:

This toggles the showBody. The exclamation point does all the work here.

That's it, you are done.

This will also work to hide/show the footer, just change the showBody to showFooter.

Rather than a button, you could use an Icon.

1 Like

@bradlymathews Good work!
There is also the Collapsible container component:

Hah! I missed that one. In examining it, it looks like the icon/button they supply, the Toggle Button is also new to me.