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:
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.