Помогите новичку

[Васик]

Здравствуйте.
У меня на странице есть такой код
script type="text/javascript"> function displ(ddd) { if (document.getElementById(ddd).style.display == 'none') {document.getElementById(ddd).style.display = 'block'} else {document.getElementById(ddd).style.display = 'none'} } </script

a href="javascript: displ('var')"> открыть текст про васю</a> <br>
<div id="var" style="display: none;"
вася
a href="javascript: displ('var')"> Закрыть текст про васю</a
</div>
Все работает. Текст открывается. Но, когда хочу еще такой-же код вставить ниже на странице для "пети", - уже не работает, открывает снова васю.
Я понимаю, что вопрос очень глупый наверно, но подскажите пожалуйста, как сделать чтобы обе ссылки работали на одной странице?

[Decode]

<style>
	span {
		display: none;
	}
</style>

<div>
	<button onclick="toggle(this.nextElementSibling)">Toggle</button>
	<span>Вася лох!</span>
</div>

<div>
	<button onclick="toggle(this.nextElementSibling)">Toggle</button>
	<span>Петя лох!</span>
</div>


<script>
	function toggle(elem) {
		elem.style.display = (elem.offsetHeight) ? '' : 'block';
	}
</script>

[Васик]

Спасибо Вам добрый человек!

[Васик]

Может еще подскажите, как быть с тегом <span> в котором находится скрытый текст? Дело в том, что мой скрытый текст довольно большого размера, и там часто встречается этот тег, так вот, все, что в него обернуто - не видно?

[Decode]

<style>
	.hidden {
		display: none;
	}
</style>

<div>
	<button onclick="toggle(this.nextElementSibling)">Toggle</button>
	<span class="hidden"><span style="color: red;">Вася</span> лох!</span>
</div>

<div>
	<button onclick="toggle(this.nextElementSibling)">Toggle</button>
	<span class="hidden"><span style="color: red;">Петя</span> лох!</span>
</div>


<script>
	function toggle(elem) {
		elem.style.display = (elem.offsetHeight) ? '' : 'block';
	}
</script>

[Васик]

Фантастика! Спасибо Большое!