This time I will share jQuery Plugin and tutorial about Show/Hide Elements Depend On Form Controls – jQuery toggle-visibility, hope it will help you in programming stack.
toggle-visibility is a small jQuery plugin which enables you to manage conditional showing/hiding of elements based on form controls such as checkbox, radio button and select list.
Installation:
2 |
$ yarn add jquery.toggle-visibility |
5 |
$ npm install jquery.toggle-visibility --save |
How to use it:
1. Download and insert the& jquery.toggle-visibility.js
script after jQuery library.
2 |
integrity = "sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" |
3 |
crossorigin = "anonymous" ></ script > |
4 |
< script src = "src/jquery.toggle-visibility.js" ></ script > |
2. Initialize the plugin and we’re ready to go.
2 |
$( '[data-toggle-element]' ).toggleVisibility(); |
3. Enable the form controls to toggle the visibility of elements using the data-toggle-element
attribute as these:
02 |
< input type = "checkbox" data-toggle-element = ".checkbox-is-checked" > |
03 |
< div class = "checkbox-is-checked" >The checkbox is checked!</ div > |
06 |
< input type = "radio" name = "radio-buttons" value = "one" data-toggle-element = ".radio-button-selections" > |
07 |
< input type = "radio" name = "radio-buttons" value = "two" data-toggle-element = ".radio-button-selections" > |
08 |
< div class = "radio-button-selections" data-toggle-element-value = "one" >One is selected</ div > |
09 |
< div class = "radio-button-selections" data-toggle-element-value = "two" >Two is selected</ div > |
12 |
< select data-toggle-element = ".select-selections" > |
14 |
< option value = "one" >One</ option > |
15 |
< option value = "two" >Two</ option > |
16 |
< option value = "three" >Three</ option > |
18 |
< div class = "select-selections" data-toggle-element-value-none = "true" >No selection</ div > |
19 |
< div class = "select-selections" data-toggle-element-value-any = "true" >Selection made</ div > |
20 |
< div class = "select-selections" data-toggle-element-value = "one" >One is selected</ div > |
21 |
< div class = "select-selections" data-toggle-element-value = "two" >Two is selected</ div > |
22 |
< div class = "select-selections" data-toggle-element-value = "three" >Three is selected</ div > |
4. Don’t forget to hide the inactive elements.
1 |
. hidden { display : none ; } |
Changelog:
v1.0.1 (2019-09-10)
- Fix bug with detecting radio button selection
v1.0.0 (2019-07-22)
- Radio buttons now can be inverted
v0.10.0 (2019-06-16)
- Added ability to invert checkbox toggle
This awesome jQuery plugin is developed by elsurudo. For more Advanced Usages, please check the demo page or visit the official website.