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:

import AutoShowHideFields from 'auto-show-hide-fields';

Direct Usage (Without a Bundler)

Simply download the AutoShowHideFields.js file and include it in your HTML:

<script src="path/to/AutoShowHideFields.js"></script>

Usage

Initialization

To use the module, instantiate the AutoShowHideFields class with an optional configuration object.

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.

<select data-checkvisibility="target1:yes,target2:[no|Noting]">
    <option value="yes">Noting</option>
    <option value="yes">Yes</option>
    <option value="no">No</option>
</select>

<input type="radio" name="showHide" value="yes" data-checkvisibility="target1:yes" />
<input type="radio" name="showHide" value="no" data-checkvisibility="target2:no" />

<div id="target1" style="display:none;">This is Target 1</div>
<div id="target2" style="display:none;">This is Target 2</div>

Example Callback Usage

You can specify custom actions when an element is shown or hidden by passing callback functions.

onShow Callback Example:

onShow: (element) => {
    console.log('Element is shown:', element);
}

onHide Callback Example:

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 : [email protected] Website : prestashopexperts