Javascript-форум - Взаимозамещение div`ов

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Взаимозамещение div`ов (https://javascript.ru/forum/misc/27051-vzaimozameshhenie-div%60ov.html)

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

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

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

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

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

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

Например,

Код:

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

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

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

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