Взаимозамещение div`ов

[Wolk_]

Добрый день, при верстке дизайна своего сайта возникла нужда в реализации нижеописанного процесса, заранее оговорюсь, что с javascript пока не подружился и использую готовые решения с небольшими правками.

Суть задачи - это реализация взаимозамещения блочных элементов, а конкретно - div`ов, при нажатии на другой div (выполняющий роль переключателя).

Итак, есть 2-а div каждый со своим контентом, имеется недалеко от них и другой div, выполняющий роль некого переключателя. Хочу заметить, что если мы наблюдаем первый div, то второй dispay:none и соответственно наоборот.

Каждый раз, когда мы нажимаем, на "переключатель" происходит упорядоченная смена этих самых дивов. Надеюсь, что я понятно изъяснился, заранее спасибо.

[bes]

Мне думается, что такие штуки реализуются посредством некоторой переменной, которая используется как флаг (интересно существуют ли другие способы).

Например,

<script>
var flag = 0;
</script>

<button  
  onclick="
 d1 = document.getElementById('div1');
 d2 = document.getElementById('div2');

  switch (flag)
  {
    case 0: {d1.style.display ='none'; d2.style.display = 'block'; flag = 1; break;}
    case 1: {d2.style.display ='none'; d1.style.display = 'block'; flag = 0; break;}
  }
">switch
</button>


<div id="div1" style="display: block; background: lightgrey">Содержимое - 1</div>
<div id="div2" style="display: none; background: lightgreen">Содержимое - 2</div>

[Wolk_]

Да, вы меня правильно поняли, почти.
1) Необязательно чтобы "кнопка", была кнопкой я не зря несколько раз указал, что будет div переключатель.
2) Есть ли менее громоздкие решения, в плане объёма кода? А так, выражаю огромную признательность, за то, что откликнулись и предложили свой вариант.

[bes]

1) а в чём разница? onclick можете вставить в любой контейнер (хоть в button, хоть в div)
2) куда уж короче (может и есть)

[Wolk_]

Ещё такой момент, как сделать переключение более плавным? Обычно это делается с помощью параметра transition - это CSS3, а вот в javascript