Toggle Visibility Of Multiple Elements In A Group - jQuery Showgroup

Showgroup is a jQuery plugin to toggle visibility of multiple elements in a group, potentially in different containers. For example to show/hide fields for different variations of an HTML form.

How to use it:

1. Import jQuery library and the showgroup.js script into the html file.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/showgroup.js"></script>

2. Create conditions (groups) in a form control, e.g. select box.

<label>Languages</label>
<select id="languages">
  <option value="js" selected>JavaScript</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
</select>

3. Create conditional elements and specify on which condition(s) to check using the data-showgroups attribute.

<div data-showgroups="js,html">
  <label>JavaScript+HTML</label>
  <input type="text">
</div>

<div data-showgroups="css">
  <label>CSS</label>
  <input type="text" class="form-control">
</div>

4. Wrap them into a container element and specify the default condition (group) to show on page load.

<div id="example" data-showgroup-container data-showgroup-default="js">
  <label>Languages</label>
  <select id="languages">
    <option value="js" selected>JavaScript</option>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
  </select>
  <div data-showgroups="js,html">
    <label>JavaScript+HTML</label/>
    <input type="text">
  </div>
  <div data-showgroups="css">
    <label>CSS</label>
    <input type="text"/>
  </div>
</div>

5. Initialize the plugin and done.

$('#example').showgroup();
$('#languages').on('change', function() {
  $('#example').showgroup($(this).val());
});

6. To initialize the plugin automatically, just add the attribute data-showgroup-toggle to the condition container and done.

<div id="example" data-showgroup-container data-showgroup-default="js">
  <label>Languages</label>
  <select id="languages" data-showgroup-toggle>
    <option value="js" selected>JavaScript</option>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
  </select>
  <div data-showgroups="js,html">
    <label>JavaScript+HTML</label/>
    <input type="text">
  </div>
  <div data-showgroups="css">
    <label>CSS</label>
    <input type="text"/>
  </div>
</div>

---

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