упрощение, группировка элементов по id

[Nemezis]

Здравствуйте.

Совсем недавно начал изучать javascript. И столкнулся с проблемой, надеюсь на помощь мастеров.

s.hide1 = function () {
							id("text2").style.visibility = "hidden";
							id("text3").style.visibility = "hidden";
							id("text4").style.visibility = "hidden";
							id("text5").style.visibility = "hidden";
							id("text6").style.visibility = "hidden";
							id("text7").style.visibility = "hidden";
						}

Как такой код можно облегчить?

Я попытался следующим образом, но не заработало.

s.hide1 = function () {
							id("text2"+"text3"+"text4"+"text5"+"text6"+"text7").style.visibility = "hidden";
						}

Очень прошу вашей помощи

[subzey]

В css есть такая замечательная вещь, как классы. Используйте их.
Да и вообще, указание стиля через js не есть труЪ. Все-таки, разделение кода и отображения.

[Nemezis]

В css есть такая замечательная вещь, как классы. Используйте их.
Да и вообще, указание стиля через js не есть труЪ. Все-таки, разделение кода и отображения.

Спасибо за рекомендацию, но мне нужна помощь именно в том ключе, который дан в первом посте.

[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>

[Nemezis]

Спасибо большое, но это решение пока слишком сложное для меня.
Пока ещё не совсем понимаю, что происходит при нажатии кнопки.

[subzey]

Nemezis,
Сначала задается правило: все элементы с классом magic-input не отображать.
Следом за ним, с бóльшим приоритетом: все элементы с классом state-1 внутри элемента с классом toggler-1, state-2 внутри toggler-2 и state-3 внутри toggler-3 показываются.

А дальше скрипт при нажатии на кнопку меняет последовательно у обвертки класс: toggler-1—toggler-2—toggler-3.

Таким образом, получается, что блок может быть в одном из трех взаимоисключающих состояниях, и при этом каждый элемент внутри него «знает», что делать при каждом из них.

Немного сумбурно объясняю, но, надеюсь, для общего понимания хватит.