Бывает нужно сделать так, чтобы при клике на один элемент он открывался, а другие были скрыты. Например, чтобы при открытии одного выпадающего блока, другие автоматом скрывались. Делается это на javascript очень просто.

<!--тут все просто, создаем кнопки или иные объекты по которым будем кликать
и объекты которые будем скрывать/показывать-->
<input type='button' onClick="visible_hide('call')" value='Первый'/><br />
<input type='button' onClick="visible_hide('call1')" value='Второй'/><br />
<input type='button' onClick="visible_hide('call2')" value='Третий'/><br />

<div id="call" class='hide' style='background:#0F0;'>
1
</div>
<div id="call1" class='hide' style='background:#F00;'>
2
</div>
<div id="call2" class='hide' style='background:#00F;'>
3
</div>

Затем, добавляем в тело документа скрипт.

<script type="text/javascript">
function visible_hide(id)
{//в принципе, если элементов много, то создание массива
//можно тоже сделать функцией, но в данном случае это не обязательно
  massive = new Array(3);	//указываем сколько у нас элементов
  massive[0]="call";		//вносим в массив id элементов
  massive[1]="call1";
  massive[2]="call2";
  //проходим циклом по всем элементам массива
  for(i=0; i<3; i++)
  {
    if(massive[i]!=id) {	// и скрываем все кроме выбранного
		document.getElementById(massive[i]).className="hide";
		}
  }	//выбираем элемент с указанным id
  el = document.getElementById(id);
  if(el.className=="hide"){ //если он скрыт - показываем
  el.className="visible" //если не скрыт - скрываем
  }else{  el.className="hide"  }
}
</script>

Ну и немного стилей для наглядности.
Храните их в шапке или в отдельном подключаемом файле стилей.

/*всем блокам задаем размеры и положение*/
#call,#call1,#call2{
width:50px;
height:50px;
margin-left:50px;
float:left;
}
/*класс отображаемых объектов*/
.visible{
display:block;
}
/*класс скрытых объектов*/
.hide{
display:none;
}

Вот собственно и все, по ссылке ниже, можете посмотреть на то, что получилось.

Пример