Beginning with the v5.0.73 web pages, the duplicationPermissionToggle.js file added functionality to use radio buttons on your web pages to show or hide content based on the user's selection. Following the instructions below, this feature can be used to configure certain information or inputs to display on a web page only when the relevant radio button is selected.
Configuration
To configure this functionality, a "data-toggle-value" attribute specifying a toggle group name must first be added to a radio button. When that radio button is clicked, any HTML elements that contain a "data-toggle-group" attribute specifying that same toggle group name will be shown. Otherwise, those elements will be hidden. When hidden, any child inputs of the hidden element will also be disabled.
Using Multiple Group Names
If a radio button specifies more than one group name in its "data-toggle-value" attribute, then HTML elements that contain any of those group names in their "data-toggle-group" attribute will be shown when that button is selected.
If an HTML element specifies more than one group name in its "data-toggle-group" attribute, then a radio button specifying all of those group names in its "data-toggle-value" attribute must be selected in order for that element to show.
Specifying a Default Checked Option
When configuring your radio toggle buttons, you should designate one of the buttons to be the default selected option when the page loads by adding a "CHECKED" attribute to that button (see code example below). Otherwise, none of the radio buttons will be selected by default and the content in all toggle groups will display on your page until the user clicks on one of the buttons to select an option.
Code Examples
The examples below show three different radio buttons that are configured to toggle three different <div> HTML elements:
<!-- Radio Buttons -->
<input type="radio" id="radio1" name="demo" CHECKED
data-toggle-value="duplication">
<input type="radio" id="radio2" name="demo"
data-toggle-value="permission">
<input type="radio" id="radio3" name="demo"
data-toggle-value="duplication permission">
<!-- HTML Elements -->
<div data-toggle-group="duplication">
This will be visible when radio1 or radio3
are clicked, and hidden for radio2</div>
<div data-toggle-group="permission">
This will be visible when radio2 or radio3
are clicked, and hidden for radio1</div>
<div data-toggle-group="duplication permission">
This will be visible only when radio3 is selected</div>Results
Radio Button 1
The first radio button contains the data-toggle-value "duplication" and will display the content in the first <div> element when selected as this element specifies a matching data-toggle-group value of "duplication." As this button also contains the "CHECKED" attribute, this option will be selected by default when the page loads.
Radio Button 2
The second button contains the data-toggle-value "permission" and will display the content in the second <div> element when selected as this element specifies a matching data-toggle-group value of "permission."
Radio Button 3
The third button contains the data-toggle-value "duplication permission" and will display the content in the first, second, and third <div> elements when selected as each of these elements contains one or both of these group names in their data-toggle-group value.
The content in the third <div> element will only display when the third radio button is selected as this is the only button that specifies both the "duplication" and "permission" group names in its data-toggle-value attribute, matching that element's data-toggle-group value.
