diff --git a/system/assets/js/admin/specific/toggleControl/toggle.js b/system/assets/js/admin/specific/toggleControl/toggle.js
index 02e2b701b6..9e66380741 100644
--- a/system/assets/js/admin/specific/toggleControl/toggle.js
+++ b/system/assets/js/admin/specific/toggleControl/toggle.js
@@ -1,6 +1,38 @@
 ( function( $ ) {
 
 	$.fn.presideToggleControl = function() {
+		function resolveTargets( list ) {
+			var targets = { controls: [], fieldsets: [] }
+			  , items   = list ? list.split( "," ) : [];
+
+			for ( var i=0; i<items.length; i++ ) {
+				var name     = $.trim( items[ i ] )
+				  , selector = "";
+
+				if ( !name.length ) {
+					continue;
+				}
+
+				switch ( name.charAt( 0 ) ) {
+					case "#":
+					case ".":
+						selector = name;
+						break;
+
+					default:
+						selector = '[name="' + name + '"]';
+				}
+
+				if ( $( selector ).is( "fieldset" ) ) {
+					targets.fieldsets.push( selector );
+				} else {
+					targets.controls.push( selector );
+				}
+			}
+
+			return targets;
+		}
+
 		function toggleControl( $control, overridden ) {
 			var controlAttributes = [ "toggleFields", "toggleDefaultFields" ]
 			  , controlChecked    = false;
@@ -21,30 +53,11 @@
 			}
 
 			for ( var i=0; i<controlAttributes.length; i++ ) {
-				var controlsName = []
-				  , fieldsets    = []
-				  , controlsList = $control.data( controlAttributes[ i ] ) ? $control.data( controlAttributes[ i ] ).split( "," ) : [];
-
-				for ( var j=0; j<controlsList.length; j++ ) {
-					var selector = "";
-
-					switch ( controlsList[ j ].charAt(0) ) {
-						case "#":
-						case ".":
-							selector = controlsList[ j ];
-							break;
-
-						default:
-							selector = '[name="' + controlsList[ j ] + '"]';
-					}
-
-					if ( $( selector ).is( "fieldset" ) ) {
-						fieldsets.push( selector );
-					} else {
-						controlsName.push( selector );
-					}
+				var targets   = resolveTargets( $control.data( controlAttributes[ i ] ) )
+				  , selectors = targets.controls.concat( targets.fieldsets );
 
-					var $child = $( selector );
+				for ( var j=0; j<selectors.length; j++ ) {
+					var $child = $( selectors[ j ] );
 
 					if ( typeof $child.data( controlAttributes[ i ] ) !== "undefined" ) {
 						if ( controlChecked ) {
@@ -61,13 +74,13 @@
 				} else {
 					toggleEvent = controlChecked ? "toggledon" : "toggledoff";
 				}
-				if ( fieldsets.length ) {
-					$( fieldsets.join( "," ) ).toggle( controlAttributes[ i ] == "toggleDefaultFields" ? !controlChecked : controlChecked );
-					$( fieldsets.join( "," ) ).trigger( toggleEvent );
+				if ( targets.fieldsets.length ) {
+					$( targets.fieldsets.join( "," ) ).toggle( controlAttributes[ i ] == "toggleDefaultFields" ? !controlChecked : controlChecked );
+					$( targets.fieldsets.join( "," ) ).trigger( toggleEvent );
 				}
-				if ( controlsName.length ) {
-					$( controlsName.join( "," ) ).closest( ".form-group" ).toggle( controlAttributes[ i ] == "toggleDefaultFields" ? !controlChecked : controlChecked );
-					$( controlsName.join( "," ) ).trigger( toggleEvent );
+				if ( targets.controls.length ) {
+					$( targets.controls.join( "," ) ).closest( ".form-group" ).toggle( controlAttributes[ i ] == "toggleDefaultFields" ? !controlChecked : controlChecked );
+					$( targets.controls.join( "," ) ).trigger( toggleEvent );
 				}
 			}
 		}
diff --git a/system/assets/js/frontend/conditionalFieldVisibility/conditionalFieldVisibility.js b/system/assets/js/frontend/conditionalFieldVisibility/conditionalFieldVisibility.js
new file mode 100644
index 0000000000..b39e1b13e3
--- /dev/null
+++ b/system/assets/js/frontend/conditionalFieldVisibility/conditionalFieldVisibility.js
@@ -0,0 +1,155 @@
+( function( $ ) {
+
+	function parsePredicate( raw ) {
+		var predicate = { invert: false, values: [] }
+		  , parts     = []
+		  , i         = 0;
+
+		raw = $.trim( raw || "" );
+
+		if ( raw.charAt( 0 ) === "!" ) {
+			predicate.invert = true;
+			raw = $.trim( raw.substring( 1 ) );
+		}
+
+		parts = raw.split( "," );
+		for ( i = 0; i < parts.length; i++ ) {
+			predicate.values.push( $.trim( parts[ i ] ) );
+		}
+
+		return predicate;
+	}
+
+	function currentValues( $wrapper ) {
+		var $checkable = $wrapper.find( "input:radio, input:checkbox" )
+		  , $field     = null
+		  , val        = null;
+
+		if ( $checkable.length ) {
+			return $checkable.filter( ":checked" ).map( function() { return String( $( this ).val() ); } ).get();
+		}
+
+		// Enhanced selects move the name onto a hidden field and never update the original
+		// select, so the named element is the only reliable source of the current value
+		$field = $wrapper.find( "select[name], input[name], textarea[name]" ).first();
+		if ( !$field.length ) {
+			$field = $wrapper.find( "select, input, textarea" ).first();
+		}
+		if ( !$field.length ) {
+			return [];
+		}
+
+		val = $field.val();
+		if ( val === null || typeof val === "undefined" ) {
+			return [];
+		}
+
+		if ( $.isArray( val ) ) {
+			return $.map( val, String );
+		}
+
+		val = String( val );
+
+		return val.indexOf( "," ) === -1 ? [ val ] : $.map( val.split( "," ), $.trim );
+	}
+
+	function predicateMatched( predicate, values ) {
+		var matched = false
+		  , i       = 0;
+
+		for ( i = 0; i < values.length && !matched; i++ ) {
+			matched = $.inArray( values[ i ], predicate.values ) !== -1;
+		}
+
+		return predicate.invert ? !matched : matched;
+	}
+
+	function resolveTargets( list ) {
+		var targets = { controls: [], fieldsets: [] }
+		  , items   = ( list || "" ).split( "," )
+		  , i       = 0
+		  , name    = ""
+		  , selector = "";
+
+		for ( i = 0; i < items.length; i++ ) {
+			name = $.trim( items[ i ] );
+			if ( !name.length ) {
+				continue;
+			}
+
+			switch ( name.charAt( 0 ) ) {
+				case "#":
+				case ".":
+					selector = name;
+					break;
+				default:
+					selector = '[name="' + name + '"]';
+			}
+
+			if ( $( selector ).is( "fieldset" ) ) {
+				targets.fieldsets.push( selector );
+			} else {
+				targets.controls.push( selector );
+			}
+		}
+
+		return targets;
+	}
+
+	function cascade( $region ) {
+		$region.each( function() {
+			var $node = $( this );
+
+			if ( $node.is( "[data-toggle-when]" ) ) {
+				apply( $node );
+			}
+			$node.find( "[data-toggle-when]" ).each( function() {
+				apply( $( this ) );
+			} );
+		} );
+	}
+
+	function apply( $wrapper ) {
+		var predicate   = parsePredicate( $wrapper.attr( "data-toggle-when" ) )
+		  , selfVisible = $wrapper.is( ":visible" )
+		  , show        = selfVisible && predicateMatched( predicate, currentValues( $wrapper ) )
+		  , targets     = resolveTargets( $wrapper.attr( "data-toggle-fields" ) )
+		  , toggleEvent = show ? "toggledon" : "toggledoff"
+		  , $affected   = $();
+
+		if ( targets.fieldsets.length ) {
+			var $fieldsets = $( targets.fieldsets.join( "," ) );
+			$fieldsets.toggle( show ).trigger( toggleEvent );
+			$affected = $affected.add( $fieldsets );
+		}
+
+		if ( targets.controls.length ) {
+			var $controls = $( targets.controls.join( "," ) )
+			  , $groups   = $controls.closest( ".form-group" );
+
+			$groups.toggle( show );
+			$controls.trigger( toggleEvent );
+			$affected = $affected.add( $groups );
+		}
+
+		cascade( $affected );
+	}
+
+	$.fn.presideConditionalFieldVisibility = function() {
+		return this.each( function() {
+			var $wrapper = $( this );
+
+			// Delegated so controls added after init (e.g. an enhanced select's hidden field) are covered
+			$wrapper.on( "change", "select, input, textarea", function() {
+				apply( $wrapper );
+			} );
+
+			apply( $wrapper );
+		} );
+	};
+
+	$( function() {
+		$( ".form-group[data-toggle-when]" ).presideConditionalFieldVisibility();
+	} );
+
+} )( jQuery || presideJQuery );
diff --git a/system/config/Config.cfc b/system/config/Config.cfc
index 117eda75bc..7fbe524942 100644
--- a/system/config/Config.cfc
+++ b/system/config/Config.cfc
@@ -958,6 +958,7 @@ component {
 			  admin                           = { enabled=true , siteTemplates=[ "*" ], widgets=[] }
 			, cms                             = { enabled=true , siteTemplates=[ "*" ], widgets=[] }
 			, presideForms                    = { enabled=true , siteTemplates=[ "*" ], widgets=[] }
+			, conditionalFieldVisibility      = { enabled=true , siteTemplates=[ "*" ], widgets=[]                      , dependsOn=[ "presideForms" ] }
 			, sitetree                        = { enabled=true , siteTemplates=[ "*" ], widgets=[]                      , dependsOn=[ "cms"   ] }
 			, sites                           = { enabled=true , siteTemplates=[ "*" ], widgets=[]                      , dependsOn=[ "cms"   ] }
 			, sticker                         = { enabled=true , siteTemplates=[ "*" ], widgets=[]                      , dependsOn=[ "admin" ] }
diff --git a/system/views/formcontrols/layouts/field.cfm b/system/views/formcontrols/layouts/field.cfm
index 1805aadcba..b5cfc744a2 100644
--- a/system/views/formcontrols/layouts/field.cfm
+++ b/system/views/formcontrols/layouts/field.cfm
@@ -9,10 +9,18 @@
 	param name="args.nolabel"  type="boolean" required="false" default="false";
 
 	hasError = Len( Trim( args.error ) );
+
+	toggleWhen        = Trim( args.toggleWhen   ?: "" );
+	toggleFields      = Trim( args.toggleFields ?: "" );
+	conditionalToggle = Len( toggleFields ) && StructKeyExists( args, "toggleWhen" ) && isFeatureEnabled( "conditionalFieldVisibility" );
+
+	if ( conditionalToggle ) {
+		event.include( "/js/frontend/conditionalFieldVisibility/" );
+	}
 </cfscript>
 
 <cfoutput>
-	<div class="form-group form-group-grid<cfif hasError> has-error</cfif>">
+	<div class="form-group form-group-grid<cfif hasError> has-error</cfif>"<cfif conditionalToggle> data-toggle-fields="#EncodeForHtmlAttribute( toggleFields )#" data-toggle-when="#EncodeForHtmlAttribute( toggleWhen )#"</cfif>>
 		<cfif not args.nolabel>
 			<label class="control-label no-padding-right" for="#args.for#">
 				#args.label#
diff --git a/tests/e2e/browser/conditionalFieldVisibility/README.md b/tests/e2e/browser/conditionalFieldVisibility/README.md
new file mode 100644
index 0000000000..2d51751180
--- /dev/null
+++ b/tests/e2e/browser/conditionalFieldVisibility/README.md
@@ -0,0 +1,42 @@
+# Conditional field visibility — browser tests
+
+Tests for the `toggleWhen` form field attribute (PRESIDECMS-3321) and its
+`conditionalFieldVisibility` plugin.
+
+Unlike the Cypress suite in `tests/e2e/tests/`, these tests need **no running Preside
+application and no datasource**. The page loads Preside's own jQuery build and the
+plugin itself straight from `system/assets/`, builds markup matching what
+`formcontrols/layouts/field.cfm` emits, and asserts the resulting visibility.
+
+A real browser is required rather than a DOM emulator, because the plugin relies on
+jQuery's `:visible`, which needs layout.
+
+## Running
+
+Open `index.html` directly in a browser, or serve the repository root and visit
+`/tests/e2e/browser/conditionalFieldVisibility/index.html`.
+
+```bash
+python3 -m http.server 8900   # from the repository root
+```
+
+The summary line reports `ALL PASS — <n> assertions` or the failure count. Results are
+also exposed on `window.__results` (`{ pass, fail, tests }`) with `window.__done` set
+once the run finishes, for scripted/CI use.
+
+## Coverage
+
+| Acceptance criterion | Covered |
+|---|---|
+| Reveals/hides on `change` and initial render (select) | yes |
+| Radio, checkbox and composite/picker-shaped controls | yes |
+| `toggleWhen="a,b"` match-any; `toggleWhen="!a"` invert | yes |
+| Targets by field name, `#id`, `.class`, and `fieldset` | yes |
+| Wrappers without `toggleWhen` left untouched | yes |
+| `toggledon` / `toggledoff` events | yes |
+| Nested toggles (a revealed field that is itself a source) | yes |
+| No value selected on load starts hidden | yes |
+
+Not covered here — these need a running application: the CFML side (the
+`conditionalFieldVisibility` feature flag and the emission of `data-toggle-fields` /
+`data-toggle-when` onto the `.form-group` wrapper).
diff --git a/tests/e2e/browser/conditionalFieldVisibility/index.html b/tests/e2e/browser/conditionalFieldVisibility/index.html
new file mode 100644
index 0000000000..dce9b91d5d
--- /dev/null
+++ b/tests/e2e/browser/conditionalFieldVisibility/index.html
@@ -0,0 +1,300 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>conditionalFieldVisibility tests</title>
+	<style>
+		body { font-family: monospace; padding: 1rem; }
+		.pass { color: #157f3b; }
+		.fail { color: #c0392b; font-weight: bold; }
+		#summary { font-size: 1.2rem; margin-bottom: 1rem; }
+		#sandbox { border: 1px dashed #ccc; margin-top: 2rem; padding: .5rem; }
+	</style>
+</head>
+<body>
+	<div id="summary">running…</div>
+	<ol id="results"></ol>
+	<div id="sandbox"></div>
+
+	<script src="../../../../system/assets/js/admin/lib/jquery-2.2.5-sec.js"></script>
+	<script>
+		// Preside's jquery build ends with $.noConflict( true ), so only presideJQuery
+		// is global. Mirror what Preside pages get.
+		var $ = window.jQuery || presideJQuery;
+
+		// ---- tiny assertion runner -------------------------------------------------
+		window.__results = { pass: 0, fail: 0, tests: [] };
+
+		function record( name, ok, detail ) {
+			window.__results.tests.push( { name: name, ok: ok, detail: detail || "" } );
+			ok ? window.__results.pass++ : window.__results.fail++;
+			var li = document.createElement( "li" );
+			li.className = ok ? "pass" : "fail";
+			li.textContent = ( ok ? "PASS  " : "FAIL  " ) + name + ( ok ? "" : "  → " + detail );
+			document.getElementById( "results" ).appendChild( li );
+		}
+
+		function test( name, fn ) {
+			// fresh sandbox per test so nothing leaks between cases
+			$( "#sandbox" ).empty();
+			try {
+				fn( function assert( ok, detail ) { record( name, !!ok, detail ); } );
+			} catch ( e ) {
+				record( name, false, "threw: " + ( e && e.message ? e.message : e ) );
+			}
+		}
+
+		// build markup exactly as field.cfm emits it
+		function group( opts ) {
+			var attrs = "";
+			if ( opts.toggleFields ) { attrs += ' data-toggle-fields="' + opts.toggleFields + '"'; }
+			if ( opts.toggleWhen  ) { attrs += ' data-toggle-when="' + opts.toggleWhen + '"'; }
+			return '<div class="form-group form-group-grid"' + attrs + '>' + ( opts.inner || "" ) + '</div>';
+		}
+
+		function targetGroup( name, extra ) {
+			return '<div class="form-group form-group-grid"' + ( extra || "" ) + '>'
+			     + '<input type="text" name="' + name + '">'
+			     + '</div>';
+		}
+
+		function selectControl( name, values, selected ) {
+			var html = '<select name="' + name + '">';
+			for ( var i = 0; i < values.length; i++ ) {
+				html += '<option value="' + values[i] + '"' + ( values[i] === selected ? ' selected' : '' ) + '>' + values[i] + '</option>';
+			}
+			return html + '</select>';
+		}
+
+		// run the plugin over the sandbox, as the document-ready binding would
+		function boot() {
+			$( "#sandbox .form-group[data-toggle-when]" ).presideConditionalFieldVisibility();
+		}
+
+		function visible( sel ) {
+			return $( "#sandbox" ).find( sel ).closest( ".form-group" ).is( ":visible" );
+		}
+	</script>
+
+	<!-- the real, unmodified plugin under test -->
+	<script src="../../../../system/assets/js/frontend/conditionalFieldVisibility/conditionalFieldVisibility.js"></script>
+
+	<script>
+	$( function() {
+
+		// AC1: select — initial render matches -> target visible
+		test( "AC1 select: initial render, value matches -> target shown", function( assert ) {
+			$( "#sandbox" ).html(
+				  group({ toggleFields:"site_theme", toggleWhen:"specific",
+				          inner: selectControl( "theme_behaviour", ["inherit","specific"], "specific" ) })
+				+ targetGroup( "site_theme" )
+			);
+			boot();
+			assert( visible( '[name="site_theme"]' ), "expected target visible on initial render" );
+		} );
+
+		// AC1: select — initial render does not match -> target hidden
+		test( "AC1 select: initial render, value does not match -> target hidden", function( assert ) {
+			$( "#sandbox" ).html(
+				  group({ toggleFields:"site_theme", toggleWhen:"specific",
+				          inner: selectControl( "theme_behaviour", ["inherit","specific"], "inherit" ) })
+				+ targetGroup( "site_theme" )
+			);
+			boot();
+			assert( !visible( '[name="site_theme"]' ), "expected target hidden" );
+		} );
+
+		// AC1: select — reveal on change
+		test( "AC1 select: reveals on change", function( assert ) {
+			$( "#sandbox" ).html(
+				  group({ toggleFields:"site_theme", toggleWhen:"specific",
+				          inner: selectControl( "theme_behaviour", ["inherit","specific"], "inherit" ) })
+				+ targetGroup( "site_theme" )
+			);
+			boot();
+			$( '#sandbox [name="theme_behaviour"]' ).val( "specific" ).trigger( "change" );
+			assert( visible( '[name="site_theme"]' ), "expected target shown after change" );
+		} );
+
+		// AC1: select — hides again on change back
+		test( "AC1 select: hides again when value changes away", function( assert ) {
+			$( "#sandbox" ).html(
+				  group({ toggleFields:"site_theme", toggleWhen:"specific",
+				          inner: selectControl( "theme_behaviour", ["inherit","specific"], "specific" ) })
+				+ targetGroup( "site_theme" )
+			);
+			boot();
+			$( '#sandbox [name="theme_behaviour"]' ).val( "inherit" ).trigger( "change" );
+			assert( !visible( '[name="site_theme"]' ), "expected target hidden after change away" );
+		} );
+
+		// AC2: radio
+		test( "AC2 radio: reveals when matching radio checked", function( assert ) {
+			$( "#sandbox" ).html(
+				  group({ toggleFields:"other_reason", toggleWhen:"other",
+				          inner: '<div class="radio"><input type="radio" name="reason" value="spam"></div>'
+				               + '<div class="radio"><input type="radio" name="reason" value="other"></div>' })
+				+ targetGroup( "other_reason" )
+			);
+			boot();
+			assert( !visible( '[name="other_reason"]' ), "expected hidden while nothing checked" );
+			$( '#sandbox [name="reason"][value="other"]' ).prop( "checked", true ).trigger( "change" );
+			assert( visible( '[name="other_reason"]' ), "expected shown once 'other' checked" );
+		} );
+
+		// AC2: checkbox
+		test( "AC2 checkbox: reveals on checked value match", function( assert ) {
+			$( "#sandbox" ).html(
+				  group({ toggleFields:"vat_number", toggleWhen:"1",
+				          inner: '<input type="checkbox" name="vat_registered" value="1">' })
+				+ targetGroup( "vat_number" )
+			);
+			boot();
+			assert( !visible( '[name="vat_number"]' ), "expected hidden while unchecked" );
+			$( '#sandbox [name="vat_registered"]' ).prop( "checked", true ).trigger( "change" );
+			assert( visible( '[name="vat_number"]' ), "expected shown once checked" );
+		} );
+
+		// AC2: composite / picker-shaped control (hidden input driven, like objectPicker/select2)
+		test( "AC2 composite control: works with select2-shaped markup", function( assert ) {
+			$( "#sandbox" ).html(
+				  group({ toggleFields:"branch", toggleWhen:"branch_scope",
+				          inner: '<div class="select2-container"><span class="select2-chosen">Branch scope</span></div>'
+				               + '<select name="scope"><option value="global">global</option><option value="branch_scope" selected>branch</option></select>' })
+				+ targetGroup( "branch" )
+			);
+			boot();
+			assert( visible( '[name="branch"]' ), "expected target visible for composite control" );
+		} );
+
+		// AC3: multi-value match-any
+		test( 'AC3 toggleWhen="a,b" matches either value', function( assert ) {
+			$( "#sandbox" ).html(
+				  group({ toggleFields:"detail", toggleWhen:"a,b",
+				          inner: selectControl( "src", ["a","b","c"], "a" ) })
+				+ targetGroup( "detail" )
+			);
+			boot();
+			assert( visible( '[name="detail"]' ), "expected visible for 'a'" );
+			$( '#sandbox [name="src"]' ).val( "b" ).trigger( "change" );
+			assert( visible( '[name="detail"]' ), "expected visible for 'b'" );
+			$( '#sandbox [name="src"]' ).val( "c" ).trigger( "change" );
+			assert( !visible( '[name="detail"]' ), "expected hidden for 'c'" );
+		} );
+
+		// AC3: invert
+		test( 'AC3 toggleWhen="!a" inverts', function( assert ) {
+			$( "#sandbox" ).html(
+				  group({ toggleFields:"detail", toggleWhen:"!a",
+				          inner: selectControl( "src", ["a","b"], "a" ) })
+				+ targetGroup( "detail" )
+			);
+			boot();
+			assert( !visible( '[name="detail"]' ), "expected hidden for 'a'" );
+			$( '#sandbox [name="src"]' ).val( "b" ).trigger( "change" );
+			assert( visible( '[name="detail"]' ), "expected visible for 'b'" );
+		} );
+
+		// AC4: target by #id
+		test( "AC4 target by #id", function( assert ) {
+			$( "#sandbox" ).html(
+				  group({ toggleFields:"#extra_id", toggleWhen:"yes",
+				          inner: selectControl( "src", ["no","yes"], "yes" ) })
+				+ '<div class="form-group form-group-grid"><input type="text" id="extra_id"></div>'
+			);
+			boot();
+			assert( $( "#sandbox #extra_id" ).closest( ".form-group" ).is( ":visible" ), "expected #id target visible" );
+		} );
+
+		// AC4: target by .class
+		test( "AC4 target by .class", function( assert ) {
+			$( "#sandbox" ).html(
+				  group({ toggleFields:".extra_cls", toggleWhen:"yes",
+				          inner: selectControl( "src", ["no","yes"], "no" ) })
+				+ '<div class="form-group form-group-grid"><input type="text" class="extra_cls"></div>'
+			);
+			boot();
+			assert( !$( "#sandbox .extra_cls" ).closest( ".form-group" ).is( ":visible" ), "expected .class target hidden" );
+			$( '#sandbox [name="src"]' ).val( "yes" ).trigger( "change" );
+			assert( $( "#sandbox .extra_cls" ).closest( ".form-group" ).is( ":visible" ), "expected .class target visible after change" );
+		} );
+
+		// AC4: fieldset target
+		test( "AC4 fieldset target toggles whole fieldset", function( assert ) {
+			$( "#sandbox" ).html(
+				  group({ toggleFields:"#fieldset-advanced", toggleWhen:"yes",
+				          inner: selectControl( "src", ["no","yes"], "yes" ) })
+				+ '<fieldset id="fieldset-advanced"><input type="text" name="adv"></fieldset>'
+			);
+			boot();
+			assert( $( "#sandbox #fieldset-advanced" ).is( ":visible" ), "expected fieldset visible" );
+			$( '#sandbox [name="src"]' ).val( "no" ).trigger( "change" );
+			assert( !$( "#sandbox #fieldset-advanced" ).is( ":visible" ), "expected fieldset hidden" );
+		} );
+
+		// AC5: no toggleWhen -> plugin must not interfere
+		test( "AC5 wrapper without data-toggle-when is untouched", function( assert ) {
+			$( "#sandbox" ).html(
+				  group({ toggleFields:"legacy_target", inner: '<input type="checkbox" class="toggle-fields" name="legacy">' })
+				+ targetGroup( "legacy_target" )
+			);
+			boot();
+			assert( visible( '[name="legacy_target"]' ), "plugin must not hide legacy boolean targets" );
+		} );
+
+		// AC6: toggledon / toggledoff events
+		test( "AC6 fires toggledon and toggledoff", function( assert ) {
+			$( "#sandbox" ).html(
+				  group({ toggleFields:"detail", toggleWhen:"yes",
+				          inner: selectControl( "src", ["no","yes"], "no" ) })
+				+ targetGroup( "detail" )
+			);
+			var on = 0, off = 0;
+			$( "#sandbox" ).on( "toggledon",  '[name="detail"]', function() { on++;  } );
+			$( "#sandbox" ).on( "toggledoff", '[name="detail"]', function() { off++; } );
+			boot();
+			assert( off > 0, "expected toggledoff on initial hidden state (got " + off + ")" );
+			$( '#sandbox [name="src"]' ).val( "yes" ).trigger( "change" );
+			assert( on > 0, "expected toggledon after reveal (got " + on + ")" );
+		} );
+
+		// AC7: nested toggles
+		test( "AC7 nested: revealed field that is itself a source", function( assert ) {
+			$( "#sandbox" ).html(
+				  group({ toggleFields:"level2", toggleWhen:"yes",
+				          inner: selectControl( "level1", ["no","yes"], "no" ) })
+				+ group({ toggleFields:"level3", toggleWhen:"yes",
+				          inner: '<select name="level2"><option value="no">no</option><option value="yes" selected>yes</option></select>' })
+				+ targetGroup( "level3" )
+			);
+			boot();
+			// level1=no -> level2 group hidden -> level3 must also be hidden even though level2 value is "yes"
+			assert( !visible( '[name="level2"]' ), "expected level2 hidden" );
+			assert( !visible( '[name="level3"]' ), "expected level3 hidden while its source is hidden" );
+			$( '#sandbox [name="level1"]' ).val( "yes" ).trigger( "change" );
+			assert( visible( '[name="level2"]' ), "expected level2 shown" );
+			assert( visible( '[name="level3"]' ), "expected level3 shown once source revealed and matching" );
+		} );
+
+		// AC8: nothing selected on load -> hidden
+		test( "AC8 no value selected on load -> target hidden", function( assert ) {
+			$( "#sandbox" ).html(
+				  group({ toggleFields:"detail", toggleWhen:"other",
+				          inner: '<select name="src"><option value="" selected></option><option value="other">other</option></select>' })
+				+ targetGroup( "detail" )
+			);
+			boot();
+			assert( !visible( '[name="detail"]' ), "expected hidden when no meaningful value selected" );
+		} );
+
+		// finish
+		var r = window.__results;
+		window.__done = true;
+		document.getElementById( "summary" ).textContent =
+			r.fail === 0 ? ( "ALL PASS — " + r.pass + " assertions" )
+			             : ( r.fail + " FAILED / " + ( r.pass + r.fail ) + " assertions" );
+		document.getElementById( "summary" ).className = r.fail === 0 ? "pass" : "fail";
+	} );
+	</script>
+</body>
+</html>