Show/Hide Controller is a Stimulus controller for showing and hiding HTML elements based on the values of related form fields.
All of these attributes are prefixed with "data-" in the attribute name.
| Attribute | Element(s) | Default | Value(s) | Description |
|---|---|---|---|---|
| controller | * | showhide | This attribute provides the Show/Hide functionality. |
All of these attributes are prefixed with "data-showhide-" in the attribute name.
| Attribute | Element(s) | Default | Value(s) | Description |
|---|---|---|---|---|
| hide | * |
The name of a form field to use to determine if the element should be hidden. If only one field is provided, the element will be hidden if the field is not empty. Otherwise, see the Operations section for more information. |
||
| join | * | and |
If more than one field is provided, this attribute determines how the fields are joined. Valid values are "and" and "or". "and" means that all fields must be populated for the element to be shown. "or" |
|
| and | all fields must be populated for the element to be shown or hidden. | |||
| or | Only one field must be populated for the element to be shown or hidden. | |||
| show | * |
The name of a form field to use to determine if the element should be shown. If only one field is provided, the element will be shown if the field is not empty. Otherwise, see the Operations section for more information. |
These are custom events that the controller will fire when it takes certain actions.
All of these events are prefixed by "showhide:".
| Event | Parameters | Description |
|---|---|---|
| initialized | Called any time that the controller is initialized. | |
| connected | Called any time that the controller is connected. | |
| disconnected | Called any time that the controller is disconnected. | |
| acted |
element: (the target element) |
Called any time that the controller forces a checkbox to be checked or unchecked. |