jQuery Plugin For Handling Conditional Html Elements - Conditional

Conditional is a very small jQuery plugin for handling conditional Html elements that allows to show and hide html elements conditionally based on user input.

See also:

• jQuery Plugin To Show & Hide Elements Conditionally - Visibly
• jQuery Plugin For Conditional Form Fields - conditionize.js

Basic usage:

1. Assume that you have a select element that allows you to show specified html elements depending on the selected option.

<select name="languages" id="languages" data-conditional="languages">
  <option value="JavaScript">JavaScript</option>
  <option value="Html">Html</option>
</select>

2. Add conditional form elements to your webpage as follow.

<div class="hide conditional-logic" data-condition="languages" data-match="JavaScript">
  ...
</div>
<div class="hide conditional-logic" data-condition="languages" data-match="Html">
  ...
</div>

3. Include jQuery library and the jQuery Conditional plugin on the html page.

<script src="jquery.min.js"></script>
<script src="jquery.conditional.js"></script>

4. That's it. Override the default settings as shown below.

className: 'hide',
eventName: 'change',
onActivate: function(element, opts) {
  element.removeClass(opts.className);
},
onDeactivate: function(elements, opts, callback) {
  elements.addClass(opts.className);
  callback.call();
},
autoBind: true

---

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