altrimenti, sempre con l'uso di JS, c'è questa soluzione proposta de pierofix:

codice:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML lang=it xml:lang="it" xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>esempio 1 mostra-nascondi</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css media=screen>
BODY {
	FONT-SIZE: 13px; COLOR: #333; FONT-FAMILY: "Trebuchet MS", serif
}
OL {
	BORDER-TOP: #fff 1px solid; WIDTH: 350px; LIST-STYLE-TYPE: none
}
LI {
	BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FONT-SIZE: 11px; PADDING-BOTTOM: 6px; MARGIN: 0px; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 6px; BORDER-BOTTOM: #fff 1px solid; BACKGROUND-COLOR: #cc9
}
LI:hover {
	BACKGROUND-COLOR: #d1d1a3
}
LI A {
	DISPLAY: block; FONT-SIZE: 13px; COLOR: #c60; TEXT-DECORATION: none
}
LI A:hover {
	COLOR: #f90; TEXT-DECORATION: none
}
LI SPAN {
	BORDER-TOP: #c60 1px solid; DISPLAY: none; PADDING-TOP: 6px
}
</STYLE>

<SCRIPT><!--
	function hided(obj) {
		var aId="a"+obj
		document.getElementById(obj).style.display="none"
		document.getElementById(aId).href="javascript:showd(" + "'" + obj + "'" + ");"
	}
	
	function showd(obj) {
		var aId="a"+obj
		document.getElementById(obj).style.display="block"
		document.getElementById(aId).href="javascript:hided(" + "'" + obj + "'" + ");"
	}
//--></SCRIPT>

</HEAD>
<BODY>
<H1>Un bel mostra-nascondi in stile DOM</H1>


Clicca sui titoli per vedere una breve descrizione dell'articolo. Clicca una 
seconda volta per nasconderla.</P>

  1. <LI><A id=ad1 href="javascript:showd('d1')">Internet Explorer nel 
  cestino</A><SPAN id=d1> Quando l'aria di rivoluzione si respira anche nel 
  web.</SPAN> 
  <LI>Ciao<SPAN id=d2> Un messaggio 
  breve scritto da uno che si nasconde dietro un nick.</SPAN> 
  <LI>Che strano!<SPAN id=d3> Il 
  miglior ricettario sulla vita scolastica mai scritto prima da un ex 
  allievo.</SPAN> </LI>

</BODY>
</HTML>