exibir/ocultar conteúdo

[juni0r 0]

Pessoal,

 

eu tenho uma lista de produtos. Se o cara clica num botão "+", exibe a descrição. Depois eu queria que no lugar desse botão surgisse o botão "-" para ocultar o conteúdo. Tenho um script bem simples que expande e oculta, mas não no mesmo botao:

<script type="text/javascript">
function exibeDiv(id){
	document.getElementById(id).style.display = '';
}

function ocultaDiv(id){
	document.getElementById(id).style.display = 'none';
}
</script>

Esse é o html atual:

<table width="100%">
  <tbody>
	<tr>
	  <td width="80%"><a href="#" onclick="exibeDiv('desc_27');">+</a> Produto X </td>
	  <td><a href="#">Comprar</a></td>
	</tr>
	<tr id="desc_27" style="display:none">
	  <td colspan="2"><p>Descricao produto X<br /><a href="#" onclick="ocultaDiv('desc_27');">ocultar</a></p></td>
	</tr>
	<tr>
	  <td width="80"><a href="#" onclick="exibeDiv('desc_28');">+</a> Produto Y </td>
	  <td><a href="#">Comprar</a></td>
	</tr>
	<tr id="desc_28" style="display:none">
	  <td colspan="2"><p>Descricao produto Y<br /><a href="#" onclick="ocultaDiv('desc_28');">ocultar</a></p></p></td>
	</tr>

  </tbody>
</table>

 

Alguém tem alguma idéia de como posso fazer?

Obrigado,

Renato

[William Bruno 1501]

A função para mostrar e esconder no mesmo botão, precisa testar o style.display atual..

<script type="text/javascript">
function exibeOcultaDiv(id){
	var obj = document.getElementById(id);
	if(obj.style.display == 'none')
	{
		obj.style.display = 'block';
	}
	else
		obj.style.display = 'none';
}
</script>

Para trocar o + por - , tente talvez com um innerHTML diretamente no elemento que disparou a função