He hecho un ejemplo sencillo base de cómo sería la cosa. Parece mucho código pero es sólo mucha estructura HTML, algo de CSS para coloritos y simple javascript para controlar cuando expandir y cuando contraer:
Lo voy a tener que poner en dos partes
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>FAQ Javascript interactivo-guiado</title>
<meta name="Author" content="derkeNuke">
<style>
#menuInicial {
background-color:#89f;
border:solid 1px black;
cursor:pointer;
padding:4px;
}
#menuEventos {
background-color:#abf;
border:solid 1px black;
cursor:pointer;
padding:4px;
}
#menuAcciones {
background-color:#fab;
border:solid 1px black;
cursor:pointer;
padding:4px;
}
#menuOps1 {
background-color:#aff;
border:solid 1px black;
cursor:pointer;
padding:4px;
}
#menuOps2 {
background-color:#8f9;
border:solid 1px black;
cursor:pointer;
padding:4px;
}
#menuObtener {
background-color:#0ae;
border:solid 1px black;
cursor:pointer;
padding:4px;
}
#menuNo {
background-color:#700;
border:solid 1px black;
color:#f00;
padding:4px;
}
.hover {
background-color:#ff9;
}
#sinCodigo {
background-color:#f00;
border: solid 3px black;
padding:4px;
color:black;
}
</style>
</head>
<body>
<div id="cuerpo">
<div id="menuInicial">
<div class="inicial" show="menuEventos">1.- AL HACER ALGO</div>
<div class="inicial" show="menuAcciones">2.- SIN HACER NADA, QUE SE EJECUTE DIRECTAMENTE EL CÓDIGO</div>
<div class="inicial" show="menuAcciones">3.- QUE SE EJECUTE CON UNA DEMORA DE X SEGUNDOS</div>
<div class="inicial" show="menuOps1">4.- OPERACIONES CON NÚMEROS, FECHAS, FRASES (strings)</div>
<div class="inicial" show="menuOps2">5.- OPERACIONES ENTRE LENGUAJES DE CLIENTE (JS) Y SERVIDOR (PHP, ASP, JAVA)</div>
<div class="inicial" show="menuObtener">6.- OBTENER DATOS DEL CLIENTE / DOCUMENTO</div>
<div class="inicial" show="menuNo">7.- ACCIONES QUE NO SE PUEDEN LOGRAR SÓLO CON JAVASCRIPT</div>
</div>
<div id="menuEventos">
<div class="evento" show="menuAcciones">1.- AL TERMINAR DE CARGARSE LA PÁGINA</div>
<div class="evento" show="menuAcciones">2.- AL MOVER EL RATÓN</div>
<div class="evento" show="menuAcciones">3.- AL HACER CLICK O DOBLE CLICK O CLICK DCHO EN EL DOCUMENTO</div>
<div class="evento" show="menuAcciones">4.- (relacionado con cajas de texto <INPUT TYPE="TEXT"/>)</div>
<div class="evento" show="menuAcciones">5.- (relacionado con cajas de seleccion <SELECT>)</div>
<div class="evento" show="menuAcciones">6.- (relacionado con botones <INPUT TYPE="button"/>)</div>
<div class="evento" show="menuAcciones">7.- (relacionado con enviar formularios <INPUT TYPE="submit"/>, incluye validaciones)</div>
<div class="evento" show="menuAcciones">8.- (relacionado con capas <DIV>)</div>
<div class="evento" show="menuAcciones">9.- (relacionado con <TEXTAREA>)</div>
<div class="evento" show="menuAcciones">10.- AL MARCAR O DESMARCAR UN CHECKBOX O UN RADIO <INPUT TYPE="checkbox"/> <INPUT TYPE="radio"/></div>
<div class="evento" show="menuAcciones">11.- AL HACER SCROLL EN LA PÁGINA</div>
<div class="evento" show="menuAcciones">12.- AL VOLVER A VISITAR POR SEGUNDA O TERCERA VEZ LA PÁGINA</div>
<div class="evento" show="menuAcciones">13.- AL SALIR DE LA PÁGINA ACTUAL (cargar otra o cerrar la ventana)</div>
<div class="evento" show="menuAcciones">14.- (relacionado con imágenes <IMG />)</div>
<div class="evento" show="menuAcciones">15.- AL SELECCIONAR TEXTO DE LA PÁGINA</div>
</div>
<div id="menuAcciones">
<div class="accion" show="sinCodigo">1.- ABRIR UN POPUP (ventana emergente)</div>
<div class="accion" show="sinCodigo">2.- REDIRECCIONAR A OTRA PÁGINA</div>
<div class="accion" show="sinCodigo">3.- ENVIAR UN FORMULARIO DE LA PÁGINA</div>
<div class="accion" show="sinCodigo">4.- CERRAR LA VENTANA</div>
<div class="accion" show="sinCodigo">5.- IMPRIMIR LA PÁGINA U OTRO CONTENIDO</div>
<div class="accion" show="sinCodigo">6.- GUARDAR, LEER, MODIFICAR, ELIMINAR UNA COOKIE</div>
<div class="accion" show="sinCodigo">7.- INTERCAMBIAR / CAMBIAR IMÁGENES</div>
<div class="accion" show="sinCodigo">8.- AÑADIR / CREAR ELEMENTOS HTML DINÁMICAMENTE (incluye texto dinámicamente)</div>
<div class="accion" show="sinCodigo">9.- ELIMINAR ELEMENTOS HTML, SUSTITUIRLOS</div>
<div class="accion" show="sinCodigo">10.- OCULTAR O MOSTRAR ELEMENTOS HTML</div>
<div class="accion" show="sinCodigo">11.- ALERTAR DE ALGO CON UNA VENTANA DIÁLOGO (ALERT() botón aceptar)</div>
<div class="accion" show="sinCodigo">12.- PEDIR CONFIRMACIÓN CON UNA VENTANA DIÁLOGO (CONFIRM() botones "sí\", \"no\", \"cancelar\")</div>
<div class="accion" show="sinCodigo">13.- PEDIR UN DATO CON UNA VENTANA DE DIÁLOGO (PROMPT() ventana con una caja de texto)</div>
<div class="accion" show="sinCodigo">14.- CAMBIAR DE ESTILO (formato, color, tamaño, posición...) DE CUALQUIER ELEMENTO HTML (estilo interno / CSS externo)</div>
<div class="accion" show="sinCodigo">15.- CAMBIAR EL VALOR DE UN FORMULARIO</div>
<div class="accion" show="sinCodigo">16.- DESHABILITAR UN CAMPO DE UN FORMULARIO</div>
<div class="accion" show="sinCodigo">17.- CONTAR CUANTOS CHECKBOX SE HAN SELECCIONADO / CAMPOS SE HAN RELLENADO</div>
<div class="accion" show="sinCodigo">18.- MANDAR A CIERTO PUNTO DE LA PÁGINA ACTUAL</div>
<div class="accion" show="sinCodigo">19.- OBTENER DATOS DEL SERVIDOR con UNA LLAMADA AJAX</div>
<div class="accion" show="sinCodigo">20.- VALIDACIONES CONCRETAS</div>
<div class="accion" show="sinCodigo">21.- FILTRAR ELEMENTOS DE UNA LISTA / TABLA / SELECT. Cualquier enumeración</div>
<div class="accion" show="sinCodigo">22.- ORDENAR UNA LISTA / TABLA / SELECT. Cualquier enumeración</div>
</div>
<div id="menuOps1">
<div class="ops1" show="sinCodigo">1.- AÑADIR O RESTAR SEGUNDOS, MINUTOS, HORAS, DÍAS, SEMANAS, MESES, AÑOS A UNA FECHA</div>
<div class="ops1" show="sinCodigo">2.- AÑADIR O RESTAR DÍAS HÁBILES O LABORALES</div>
<div class="ops1" show="sinCodigo">3.- CALCULAR LA MEDIA</div>
<div class="ops1" show="sinCodigo">4.- REDONDEAR</div>
<div class="ops1" show="sinCodigo">5.- FORMATEAR UN NÚMERO</div>
<div class="ops1" show="sinCodigo">6.- DETECTAR DOS LETRAS / PALABRAS / ESPACIOS SEGUIDAS IGUALES</div>
<div class="ops1" show="sinCodigo">7.- DETECTAR PALABRAS REPETIDAS EN UNA LISTA DE PALABRAS</div>
<div class="ops1" show="sinCodigo">8.- ELIMINAR ESPACIOS SOBRANTES DE UN STRING (trimming)</div>
</div>
<div id="menuOps2">
<div class="ops2" show="sinCodigo">1.- PETICIONES AJAX</div>
<div class="ops2" show="sinCodigo">2.- INTERCAMBIAR VARIABLES ENTRE LENGUAJES (TAMBIÉN ARRAYS)</div>
</div>
<div id="menuObtener">
<div class="obtener" show="sinCodigo">1.- SISTEMA OPERATIVO (PLATAFORMA) Y VERSIÓN</div>
<div class="obtener" show="sinCodigo">2.- NAVEGADOR Y VERSIÓN</div>
<div class="obtener" show="sinCodigo">3.- TAMAÑO Y RESOLUCIÓN DE LA VENTANA / PANTALLA DEL NAVEGADOR / ORDENADOR DEL CLIENTE</div>
<div class="obtener" show="sinCodigo">4.- SI JAVASCRIPT ESTÁ ACTIVADO EN EL NAVEGADOR</div>
<div class="obtener" show="sinCodigo">5.- HORA DEL CLIENTE</div>
<div class="obtener" show="sinCodigo">6.- OBTENER GRUPOS DE ELEMENTOS (ENLACES, IMAGENES, FORMULARIS, FRAMES...)</div>
<div class="obtener" show="sinCodigo">7.- OBTENER URL Y VARIABLES DE LA URL</div>
</div>
<div id="menuNo">
<div class="no" show="sinCodigo">1.- MANDAR EMAILS</div>
<div class="no" show="sinCodigo">2.- ESCRIBIR EN UN ARCHIVO DE TEXTO, O LEERLO</div>
<div class="no" show="sinCodigo">3.- TRABAJAR CON UNA BASE DE DATOS</div>
<div class="no" show="sinCodigo">4.- SUBIR ARCHIVOS AL SERVIDOR</div>
<div class="no" show="sinCodigo">5.- OBTENER LA HORA / VARIABLES DEL SERVIDOR</div>
<div class="no" show="sinCodigo">6.- OCULTAR TU CÓDIGO</div>
<div class="no" show="sinCodigo">7.- ENCUESTAS / CONTADORES DE VISITAS / SISTEMAS USUARIO CONTRASEÑAS</div>
<div class="no" show="sinCodigo">8.- MANEJAR PÁGINAS WEB AJENAS (ENVIAR FORMULARIOS AJENOS, SCROLL, CAMBIAR CONTENIDO...)</div>
<div class="no" show="sinCodigo">9.- MANEJAR EL SISTEMA OPERATIVO (CAMBIAR LAS VENTANAS DE DIÁLOGO ALERT() O CONFIRM(), ELIMINAR CONFIRMACIONES DE IMPRIMIR O GUARDAR, ELIMINAR BARRA DE TÍTULO DEL NAVEGADOR, ABRIR UN MENÚ, AÑADIR A FAVORITOS SIN CONFIRMACIÓN... GENERALMENTE TODOS LOS "ABUSOS" AL USUARIO)</div>
</div>
<div id="sinCodigo">
Lo siento, estamos en fase de desarrollo, todavía no tenemos el código de esta sección.
</div>
</div>