Auto Show Hide Fields

A lightweight JavaScript module to show/hide fields based on select or radio input values. This module allows you to automatically manage the visibility of form fields and apply smooth transitions, with support for callback functions when elements are shown or hidden.

Features

- Automatically show/hide fields based on the value of select or radio input elements.
- Supports smooth transitions with configurable duration.
- Callbacks for custom actions when fields are shown or hidden.
- Easy to integrate and customize with minimal setup.

Installation

You can either include the module directly in your project or install it via a package manager if you're using a module bundler (e.g., Webpack, Gulp, etc.).



#### Using a Module Bundler

- Install the module via npm (if available) or manually download the ``.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

Noting
Yes
No

This is Target 1

This is Target 2

`

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

License

This project is licensed under the MIT License.

Author

Developed by codevadi, Contributions and feedback are welcome!

Gmail : codevadi@gmail.com
Website : prestashopexperts