Скрыть сразу несколько блоков (javascript)

[anjoy74]

Здравствуйте! Скажите пожалуйста как можно с помощью события onclick скрыть несколько блоков div сразу. Допустим есть блоки wind1, wind2, wind3, wind4.

Для каждого из них в меню есть кнопка. Нужно чтобы при нажатии на кнопку 1 показывался блок wind1, при нажатии на кнопку 2 скрылся блок wind1 и отобразился блок wind2, то есть при нажатии на кнопку показывался только соответствующий блок, а остальные скрывались.

Я решил эту проблему так:

wind1:

<div id="button1">
<a class="but" href="#" onclick="document.getElementById('wind1').style.display='block';
document.getElementById('wind2').style.display='none'; 
document.getElementById('wind3').style.display='none';
document.getElementById('wind4').style.display='none'; 
return false;">
	<img class="myImage" src="1.png" ></img>
</a></div>

wind2:

<div id="button2">
<a class="but" href="#" onclick="document.getElementById('wind2').style.display='block'; document.getElementById('wind1').style.display='none'; 
document.getElementById('wind3').style.display='none';
document.getElementById('wind4').style.display='none';  
return false;">
	<img class="myImage" src="2.png"></img>
</a>		
</div>

Аналогично для блоков wind3 и wind4.

Мой код очень огромен. Тем более будет затруднительно реализовать эту идею для 20 блоков и так далее.

Как сделать проще?

Edited June 12, 2012 by anjoy74

[Avalon4eg]

Для того чтоб удобнее обращаться к элементам используем библиотеку jquery

Ложите все слои wind в какой нибудь слой (в примере с id main) для удобства, а на ссылку ставите вызов функции showhide, в качестве параметра передаете идентификатор слоя который надо показать/оставить видимым

JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
        <script type="text/javascript">

            function showhide(id){
                $('#main div').hide();
                $('#'+id).show();
            }
            </script>

HTML

<div id="main">
    <div id="wind1"></div>
    <div id="button1"><a class="but" href="javascript:showhide(wind1)" </a></div>
..........................
    <div id="wind20"></div>
    <div id="button20"><a class="but" href="javascript:showhide(wind20)" </a></div>

</div>

Edited June 12, 2012 by Avalon4eg

[hedgehog]

Мой вариант список триггеров генерируется автоматически в зависимости количества блоков, которые нужно скрывать

http://jsfiddle.net/W8WAn/

Edited June 12, 2012 by hedgehog