iQToggle is a jQuery plugin to provide a declarative way for conditionally controlling the visibility of elements.

Download the production version or the development version.

In your web page:

<script src="jquery.js"></script>
<script src="iqtoggle.min.js"></script>
...
<select id="source">
    <option value="good">Good decision</option>
    <option value="better">Better decision</option>
    <option value="best">Best decision</option>
</select>
<span id="conditional">Whooho! You made best best decision!</span>

<script>
    $("#conditional").toggleIfSelected("#source option[value='best']");
</script>

iQToggle will now subscribe to the change events of the #source select box and will hide the #conditional span unless the Best decision has been chosen. This works as well for radio buttons and checkboxes.

(Coming soon)

<select id="source">
    <option value="good">Good decision</option>
    <option value="better">Better decision</option>
    <option value="best">Best decision</option>
</select>
<span id="conditional" data-show-if-selected="#source option[value='best']">Whooho! You made best best decision!</span>

<script>
	// put this to your glue code
    $(function() {
		$("[data-show-if-selected]").each(function(i, node) {
			var el = $(node);
			var selector = el.data("show-if-selected");
			el.toggleIfSelected(selector);
		});
	});
</script>

This code snippet will connect all elements that are annotated with a data-show-if-selected attribute to the selection source that is given in the attribute.

(More coming soon)

(Nothing yet)

Copyright 2012-2014 innoQ Deutschland GmbH. Licensed under the Apache License, Version 2.

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.

Please don't edit files in the dist subdirectory as they are generated via grunt. You'll find source code in the src subdirectory!

While grunt can run the included unit tests via PhantomJS, this shouldn't be considered a substitute for the real thing. Please be sure to test the test/*.html unit test file(s) in actual browsers.

• npm install install development dependencies
• grunt dependencies downloads third-party components
• grunt test runs the test suite
• grunt dist creates release files

Or run all grunt-taks by calling grunt. Add --verbose option to get detailed output.