Show/hide Content Based On User Selection - jQuery serialexpand

serialexpand is a lightweight jQuery plugin for conditional visibility that smoothly shows and hides content based on checkbox, radio button, and dropdown select selection.

How to use it:

1. Add the JavaScript jquery.serialexpand.js after you load the latest jQuery JavaScript library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.serialexpand.js"></script>

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

$(document).ready(function(){
  $.serialexpand({
    selector: '[data-serialexpand]'
  });
});

3. Enable radio buttons to toggle between DIV blocks.

<!-- Radio Buttons -->
<input type="radio" data-serialexpand="div-1">
<input type="radio" data-serialexpand="div-2">

<!-- DIV Blocks To Show/Hide -->
<div data-serialexpand-target="div-1">
  For Radio Button 1
</div>
<div data-serialexpand-target="div-2">
  For Radio Button 2
</div>

4. Enable a checkbox to show the content you specify.

<!-- Checkboxes -->
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" data-serialexpand="div-3">

<!-- DIV Block To Show/Hide -->
<div data-serialexpand-target="div-3">
  For Checkbox 3
</div>

5. Toggle between DIV blocks based on the option your user pick in a dropdown select.

<!-- Dropdown Select -->
<select>
  <option data-serialexpand="div-4">Option 1</option>
  <option data-serialexpand="div-5">Option 2</option>
  <option>Option 3</option>
</select>

<!-- DIV Block To Show/Hide -->
<div data-serialexpand-target="div-4">
  For Option 1
</div>
<div data-serialexpand-target="div-5">
  For Option 2
</div>

6. Specify the animations you'd like to use when toggling between content. See https://api.jquery.com/category/effects/ for more details.

$(document).ready(function(){
  $.serialexpand({
    selector: '[data-serialexpand]',
    fxIn: 'slideDown',
    fxOut: 'slideUp',
  });
});

---

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