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

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

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.

1. Download and insert the& jquery.toggle-visibility.js script after jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="src/jquery.toggle-visibility.js"></script>

2. Initialize the plugin and we're ready to go.

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

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

<!-- Checkbox -->
<input type="checkbox" data-toggle-element=".checkbox-is-checked">
<div class="checkbox-is-checked">The checkbox is checked!</div>
<!-- Radio buttons -->
<input type="radio" name="radio-buttons" value="one" data-toggle-element=".radio-button-selections">
<input type="radio" name="radio-buttons" value="two" data-toggle-element=".radio-button-selections">
<div class="radio-button-selections" data-toggle-element-value="one">One is selected</div>
<div class="radio-button-selections" data-toggle-element-value="two">Two is selected</div>
<!-- Select list -->
<select data-toggle-element=".select-selections">
  <option></option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>
<div class="select-selections" data-toggle-element-value-none="true">No selection</div>
<div class="select-selections" data-toggle-element-value-any="true">Selection made</div>
<div class="select-selections" data-toggle-element-value="one">One is selected</div>
<div class="select-selections" data-toggle-element-value="two">Two is selected</div>
<div class="select-selections" data-toggle-element-value="three">Three is selected</div>

4. Don't forget to hide the inactive elements.

.hidden { display: none; }

This awesome jQuery plugin is developed by elsurudo. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 27.02.2018
  • Source