csstoggle.css

input[data-onoff]:empty {
  margin-left: -9999px;
}

input[data-onoff]:empty ~ label {
  position: relative;
  float: left;
  height: 22px;
  line-height: 22px;
  text-indent: 50px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
}

input[data-onoff]:empty ~ label:before, 
input[data-onoff]:empty ~ label:after {
  font-size: 11px;
  color: #fff;
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: ' ';
  width: 47px;
  background-color: #a0a0a0;
  border-radius: 100px;
  -moz-transition: all 100ms linear;
  -webkit-transition: all 100ms linear;
  transition: all 100ms linear;
  text-transform: uppercase;
  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

input[data-onoff]:empty ~ label:before {
  content: 'av';
  text-indent: 23px;
  line-height: 23px;
}

input[data-onoff]:empty ~ label:after {
  content: 'på';
  text-indent: -19px;
  width: 16px;
  height: 16px;
  line-height: 18px;
  top: 3px;
  bottom: 3px;
  margin-left: 3px;
  background-color: #fefefe;
  border-radius: 100px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3)
}

input[data-onoff]:checked ~ label:before {
  color: transparent;
  text-shadow: 0 0 0 transparent;
  background-color: #78af7f;
}

input[data-onoff]:checked ~ label:after {
  margin-left: 28px;
}

.checkbox:after {
  content: '';
  display: table;
  clear: both;
}

csstoggle.html

<div class="checkbox">
  <input type="checkbox" name="onoff-toggle" id="onoff-toggle" data-onoff="#onoff-toggle-element-id" />
  <label for="onoff-toggle">Visa/gömma alternativ</label>
</div>
<div class="group legible hidden" id="onoff-toggle-element-id">
  <p>On/off-switchar är egentligen vanliga checkboxar.</p>
</div>
<div class="checkbox group group-invisible">
  <input checked="checked" type="checkbox" name="onoff-toggle2" id="onoff-toggle2" data-onoff />
  <label for="onoff-toggle2">Denna onoff är på vid initiering</label>
</div>

csstoggle.js

//
// Everything in this file is optional. It's only a suggestion of helpers
// you can use if you want to show/hide stuff with data-onoff="selector"
// or otherwise toggle it programmatically. Can be better - feel free to
// make it so.
//

$(document).ready(function() {
    $('input[type="checkbox"][data-onoff]').onoff();
});

(function(){

    // Declare methods
    var methods = {

        setup: function(item) {
            var vars = {};
            vars.item = item;
            vars.$object = $(item);
            vars.$target = $(vars.$object.data('onoff'));
            vars.extraevent = vars.$object.data('onoff-function');
            $(item).data('vars', vars);
        },

        init: function(item) {
            methods.setup(item);
            var vars = $(item).data('vars');

            // Standard click event
            vars.$object.click(function(e){
                methods.showhide(vars.item);
            });

            // Check if the target has any active fields. If so, set onoff as active
            var targethasactive = false;
            var targetinputs = vars.$target.find('input, textarea').not('.select2-input, [type="checkbox"]');
            if(targetinputs.length) {
                if(targetinputs.val().length) {
                    targethasactive = true;
                }
            }

            if(targethasactive) {
                methods.toggle(vars.item);
            } else {
                methods.showhide(vars.item);
            }
        },

        toggle: function(item, value) {
            var vars = $(item).data('vars');
            if(value === undefined) {
                vars.$object.trigger('click');
            } else if(value === true) {
                methods.toggleon(vars.item);
            } else if(value === false) {
                methods.toggleoff(vars.item);
            }
        },

        toggleon: function(item) {
            var vars = $(item).data('vars');
            var active = vars.$object.is(':checked');
            if(!active) {
                vars.$object.trigger('click');
            }
        },

        toggleoff: function(item) {
            var vars = $(item).data('vars');
            var active = vars.$object.is(':checked');
            if(active) {
                vars.$object.trigger('click');
            }
        },

        showhide: function(item) {
            var vars = $(item).data('vars');
            var active = vars.$object.is(':checked');
            if(!active) {
                vars.$target.addClass('hidden');
            } else {
                vars.$target.removeClass('hidden');
            }
        }
    };

    $.fn.onoff = function(method, arg1) {
        return this.each(function() {
            if (methods[method]) {
                methods[method](this, arg1);
            } else if (typeof method === 'object' || ! method) {
                methods.init(this);
            } else {
                console.error("Method " + method + " does not exist!");
            }
        });
    };
})();