[subzey]

Ох уж эта практика без теории…

<style type="text/css">
	.magic-input {visibility: hidden}
	.toggler-1 .state-1,
	.toggler-2 .state-2,
	.toggler-3 .state-3 {
		visibility: visible;
	}
</style>
<form id="container" class="toggler-1">
	<div>
		<input name="foo1"   class="magic-input state-1" />
		<input name="foo2"   class="magic-input state-2" />
		<input name="foo3"   class="magic-input state-3" />
	</div>
	<div>
		<input name="foo265" class="magic-input state-3" />
		<input name="foo42"  class="magic-input state-1" />
		<input name="foo666" class="magic-input state-2" />
	</div>
	<div>
		<input name="foo7"   class="magic-input state-2" />
		<input name="fooNaN" class="magic-input state-3" />
		<input name="foo13"  class="magic-input state-1" />
	</div>
	<div>
		<input type="button" value="Roll!" onclick="stateChange(); return false"/>
	</div>
</form>
<script type="text/javascript">
	function stateChange(){
		if (!arguments.callee.state) arguments.callee.state = 1;
		arguments.callee.state = arguments.callee.state%3 + 1;
		document.getElementById('container').className = "toggler-" + arguments.callee.state;
	}
</script>