Buonasera, premetto che non sono un grande esperto nella programmazione di siti web quindi passatemi qualche termine non proprio corretto;

Sto realizzando un sito dove mi viene richiesto una lista di categorie, cliccando sulle categorie devono apparire altre informazioni, vi faccio vedere questo esempio per spiegarmi al volo:

http://www.kstardust.it/test/spoiler.html

e fin qua va tutto bene, mi è stato richiesto però che sia possibile visionare un argomento per volta, cioè che come vado ad aprire un secondo spoiler, il precedente si chiuda in automatico... come posso fare???

Ringrazio in anticipo

Riporto il codice utilizzato:

<head>
<style>
.specialisti {color: black; font-family: arial, helvetica, sans-serif; font-size: 12pt;}
.dottori {color: blue; text-align: left; font-family: Times-new-roman, helvetica, sans-serif; font-size: 12pt; font-style: italic;}
.testo {text-align: justify; color: black; font-family: arial, helvetica, sans-serif; font-size: 12pt;}
.spoilerbutton {font-weight: bold; margin: 0px; color: WHITE; background: DODGERBLUE; padding: 2px; width: 500px; font-size: 15px;}
.spoilerbutton2 {font-weight: bold; margin: 0px; color: DODGERBLUE; background: WHITE; padding: 2px; width: 500px; font-size: 15px;}
.spoilerbody {display: none; margin: 0px; padding: 1px; width: 500px; font-size: 15px;}
.immagine {float: left;}
</style>
</head>



<body>




<div class="spoiler"><div class="spoilerheader">
<input type="button" class="spoilerbutton" value="Agopuntura" onclick="n = this.parentNode.parentNode.lastChild;if(n.style.di splay == 'none') {n.style.display = 'block';} else {n.style.display = 'none';} return false;"/>
</div>

<div class="spoilerbody">
CONTENUTO DELLO SPOILER
</div></div>
</p>
</body>