Toggle Visibility Of Elements Based On Select - jQuery Toggler

File Size: 6.16 KB
Views Total: 631
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Toggle Visibility Of Elements Based On Select - jQuery Toggler

Toggler is a small jQuery content toggle plugin that conditionally shows & hides HTML elements depending on the value in a select dropdown.

How to use it:

1. Download and place the minified version of the toggler plugin after jQuery.

<script src="" 
<script src="jquery.toggler.js"></script>

2. Create elements you want to toggle the visibility.

  • data-toggle-condition: selector of the select element
  • data-toggle-value: conditionally show/hide the element base on this value
<div class="conditional" 

<div class="conditional" 

3. Create a select element to toggle the visibility of the elements you specify.

<select name="demo" id="demo" data-toggler="demo">
  <option>--- Select An Option ---</option>
  <option value="jqueryscript">jQuery</option>
  <option value="cssscript">CSSScript</option>

4. Hide the elements on page load.

.conditional {
  display: none;

5. Call the function and done.


6. Customize the toggler & solver functions.

<div class="conditional" 
  solvers: {
    value: function(el, param, item, opts) {
      var val = el.val();
      return $.isArray(param) ? param.indexOf(val) >= 0 : param == val;
    valueNot: function(el, param, item, opts) {
      var val = el.val();
      return !opts.solvers.value(el, param, item, opts);
    oneOf: function(el, param, item, opts) {
      var ret = false,
        conditions ='toggle-condition').split('|');
      if (conditions) {
        var value ='toggle-value');
        for (var i = 0; i < conditions.length; i++) {
          var condition = conditions[i],
            element = $('[data-toggler=' + condition + ']');
          if ( element.val() == value ) {
            ret = true;
      return ret;
  togglers: {
    display: function(el, toggle, opts) {
      el.css('display', toggle ? 'block' : 'none');
    enabled: function(el, toggle, opts) {
      el.prop('disabled', !toggle);

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