This is an Umbraco package. It implements a checkbox and dropdown datatype editors that work like the core ones (in fact they are based in the same code), but allows to hide or display other properties in the same Document Type.
Run this form your Package Manager Console in Visual Studio:
PM> Install-Package Our.Umbraco.ConditionalDisplayers
https://our.umbraco.com/packages/backoffice-extensions/conditional-displayers/
Download the code and copy it into you App_Plugin folder.
Username: admin@admin.com
Password: Password123
Create a new DataType and select 'Checkbox Conditional Displayer' as the Property Editor.
-Default value: select the value that the checkbox will have by default: checked/unchecked.
-Show if checked: enter the aliases of those properties you want to show when the checkbox is checked. Note: these properties will be hidden if it's unchecked.
-Show if unchecked: enter the aliases of those properties you want to show when the checkbox is unchecked. Note: these properties will be hidden if it's checked.
Create a new DataType and select 'Dropdown Conditional Displayer' as the Property Editor.
You'll have to create a list of options that the dropdown will display. In addition to the value you have two other inputs used to show or hide one or more properties.
-Show if selected: enter the aliases of those properties you want to show when the checkbox is selected. Note: these properties won't be hidden when this value unselected. -Hide if selected: enter the aliases of those properties you want to show when the checkbox is selected. Note: these properties won't be hidden when this value unselected.
Note: the difference of behaviour between the checkbox and the dropdown input logic can be a bit confusing, but after a lot of testing it seems the most flexible way to combine the different possibilities when configuring them. I'm open to other behaviour suggestions.
The Conditional Displayers are normal property editors so you can access their values as with any other property (strongly typed model, GetPropertyValue,...)
This version uses the new UUI Library included by default in Umbraco 10.4 + and 11.1 + based on this post: https://umbraco.com/blog/umbraco-product-update-january-2023/
For previous versions of Umbraco that still support the uui, you will need to include or reference the library's css and js files manually.
Fire Hydrant icon by Icons8
This package is maintaned by Mario Lopez. If you want to say thank you: