jQuery Toggle Visibility Plugin - Free Download Show/Hide Elements Depend On Form Controls - jQuery toggle-visibility

Free Download Show/Hide Elements Depend On Form Controls – jQuery toggle-visibility

Posted on

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.

jQuery Toggle Visibility Plugin - Free Download Show/Hide Elements Depend On Form Controls - jQuery toggle-visibility
File Size: 5.91 KB
Views Total: 3140
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

1 # Yarn
2 $ yarn add jquery.toggle-visibility
3  
4 # NPM
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.

1 $(function() {
2   $('[data-toggle-element]').toggleVisibility();
3 });

3. Enable the form controls to toggle the visibility of elements using the data-toggle-element attribute as these:

01 <!-- Checkbox -->
02 <input type="checkbox" data-toggle-element=".checkbox-is-checked">
03 <div class="checkbox-is-checked">The checkbox is checked!</div>
04  
05 <!-- Radio buttons -->
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>
10  
11 <!-- Select list -->
12 <select data-toggle-element=".select-selections">
13   <option></option>
14   <option value="one">One</option>
15   <option value="two">Two</option>
16   <option value="three">Three</option>
17 </select>
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.

source : jquery.net