A jQuery plugin to show and hide fields based on select or radio button values.
npm install auto-show-hide-fields.js` file.
- Import the module into your JavaScript file:
`js
import AutoShowHideFields from 'auto-show-hide-fields';
`
#### Direct Usage (Without a Bundler)
Simply download the `AutoShowHideFields.js` file and include it in your HTML:
`html
`
Usage
#### Initialization
To use the module, instantiate the `AutoShowHideFields` class with an optional configuration object.
`js
const autoShowHide = new AutoShowHideFields({
duration: 300, // Transition duration (in milliseconds)
autoTriggerChange: true, // Automatically trigger the 'change' event
onShow: (element) => {
console.log('Element is shown:', element);
},
onHide: (element) => {
console.log('Element is hidden:', element);
}
});
`
#### Configuration Options
- `selector` (default: `"[data-checkvisibility]"`): A CSS selector for targeting the fields that should show/hide based on other form input values.
- duration (default: `0`): The duration of the transition effect when showing or hiding elements (in milliseconds).
- `autoTriggerChange` (default: `true`): Whether to automatically trigger the `change` event to initialize visibility on page load.
- `onShow` (default: `null`): A callback function that is called when an element is shown. Receives the element as an argument.
- `onHide` (default: `null`): A callback function that is called when an element is hidden. Receives the element as an argument.
#### HTML Structure
Make sure the elements that need to trigger visibility have the `data-checkvisibility` attribute, specifying the target elements and values.
`html
`
#### Example Callback Usage
You can specify custom actions when an element is shown or hidden by passing callback functions.
`onShow` Callback Example:
`js
onShow: (element) => {
console.log('Element is shown:', element);
}
`
`onHide` Callback Example:
`js
onHide: (element) => {
console.log('Element is hidden:', element);
}
`
#### Methods
` new AutoShowHideFields(options) `
This is the main class that initializes the module.
##### Options:
- `selector` (string, default: `"[data-checkvisibility]"`): The selector for elements with the `data-checkvisibility` attribute.
- `duration` (number, default: `0`): The duration (in milliseconds) for transitions when elements are shown/hidden.
- `autoTriggerChange` (boolean, default: true): Whether to automatically trigger the change event to initialize visibility.
- `onShow` (function, default: `null`): Callback function when an element is shown.
- `onHide` (function, default: `null``): Callback function when an element is hidden.