Como ocultar ''las estadisticas'' en un spoiler

[zoby]

Me gustaría poder meter en un Spoiler el Quien esta conectado, Quien nos ha visitado, Estadisticas, Actividad durante las ultimas 24 horas, Top posteadores, Estadísticas de los puntos, Usuarios con más puntos
(Dejo una captura, con amarillo, he ''hecho una simulación de que ocultaría el spoiler'', ya se que me ha quedado algo mal, lo hice rapido )

Sería algo tipo a lo que hay en coloreatuforo

Juraría haber visto varios temas preguntando esto, pero (ahora) no encuentro ni uno

[DaVidU]

lo que yo uso amigo es un javascript de acordeon adaptado a mi estilo, deberás buscarte uno free y adaptarlo tu solito si deseas esos efectos (al abrir uno, el que estaba abierto se cierra y así), si tan solo quieres ponerlos en un spoiler dilo y te digo un ejemplo, tan solo debes manejar el html del archivo index_body.html

[zoby]

lo que yo uso amigo es un javascript de acordeon adaptado a mi estilo, deberás buscarte uno free y adaptarlo tu solito si deseas esos efectos (al abrir uno, el que estaba abierto se cierra y así), si tan solo quieres ponerlos en un spoiler dilo y te digo un ejemplo, tan solo debes manejar el html del archivo index_body.html

Funcionaría algo así ?¿

Código: Seleccionar todo

<div style="padding: 3px; background-color: #dcebfe; border: 1px solid #0099FF; font-size: 1em;-moz-border-radius: 3px;-webkit-border-radius: 3px;"> 
   <div style="text-transform: uppercase; border-bottom: 1px solid #0099FF; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;    font-family: Tahoma, Geneva, sans-serif; color:#0077b2;-moz-border-radius: 3px;-webkit-border-radius: 3px;"> 
      <span onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<b>{SIMPLETEXT1}: </b><a href=\'#\' onClick=\'return false;\'>Ocultar</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>{SIMPLETEXT1}: </b><a href=\'#\' onClick=\'return false;\'>Mostrar</a>'; }" /> 
      <b>{AQUÍ EL TITULO DEL SPOILER: </b><a href="#" onClick="return false;">Mostrar</a></span> 
   </div> 
   <div style="padding: 3px; background-color: #FFFFFF; border: 1px solid #0099FF; font-size: 0.9em;-moz-border-radius: 3px;-webkit-border-radius: 3px;"> 
      <div style="display: none;">AQUÍ EL CONTENIDO</div> 
   </div> 
</div>

Y si funcionaría, como lo hago ''para que se vea bien con mi estilo'' ?¿ (me imagino que cambiando el color y demas, pero ahi ya no se mucho, y como hay varios lugares donde se tiene que cambiar el color, la unica que tengo clara es background-color: #dcebfe, que lo cambio, y cambia el fondo, además, también lo tendría que hacer bastante mas pequeño de lo que sale con el codigo anterior)
También buscare un ''javascript de acordeon''
Supongo que el javascript de acordeon se quedara mejor no ?¿ (tras adaptarlo al estilo, evidentemente )