FAQ deplejable mediane click en javascript

Quiero hacer un FAQ desplegable, de forma que solo se vea la pregunta y al hacer click sobre ella, aparezca la respuesta. Tengo el siguiente codigo, pero no se porque la primera vez tengo que hacer dos clicks sobre la pregunta para que se vea la respuesta, ¿porque ocurre eso y como puedo solucionarlo?

Código Javascript :

function mostrarOculto(){
   var parrafos=document.getElementsByTagName("p");
   for (var i=0;i<parrafos.length;i++){
      if (parrafos[i].className=="oculto"){
         var parrafoOculto=parrafos[i];
         
      }
   }

   if (parrafoOculto.style.display=="none"){
      parrafoOculto.style.display="block";
   }else{
      parrafoOculto.style.display="none";
   }
}

window.onload=function(){
   var parrafoMostrar=document.getElementById("mostrarOculto");
   parrafoMostrar.onclick=mostrarOculto;   
}

Código HTML :

<div>
<p id="mostrarOculto">¿quieres ver el texto que hay oculto? haz click aqu&iacute;</p>
<p class="oculto">Este texto aparece al hacer click en la pregunta de arriba, podr&iacute;a servir
por ejemplo, para una secci&oacute;n de FAQ's o alguna otra cosa por el estilo</p>
</div>

podrias utilizar jQuery para ello que te simplifica mucho el trabajo. Tendrías algo de código como esto:

Código Javascript :

$(document).ready(function() {
       $('#mostrarOculto')
      .toggle(
         function() {
            $(this).html('Ocultar el texto');
            $('p.oculto').slideDown('slow');
         },
         function() {
            $(this).html('Mostrar texto oculto');
            $('p.oculto').slideUp('slow');                        
         }
                  );
}

Pruebalo y me cuentas. Saludos

Gracias bucle_infinito por tu respuesta, pero el objetivo es hacerlo en javascript para aprender el lenguaje.

Si me pongo ha hacerlo en JQuery puede que me resulte mas facil, pero seguiré sin saber utilizar javascript adecuadamente^^

Pon la llamada a mostrarOculto directamente como evento onclick del <p> con id="mostrarOculto" en vez de cargar el evento en onload. Lo que te está ocurriendo es que haces clic la primera vez cuando el evento onload todavía no se ha ejecutado (porque la página todavía no terminó de cargarse).

Gracias por tu respuesta DriverOp, pero lo que busco con esta practica es separar totalmente el codigo javascript del HTML asi que tu solucion aunque funciona no es la que estoy buscando.

Ademas lo que dices acerca de que la primera vez que hago clic aun no se ha cargado el evento onload no es cierto por una sencilla razon, mire el codigo con firebug al mismo tiempo que hacia click sobre la pregunta y si me modifica el codigo pero
añade style="display:none;" en lugar de style="display:block;"

if (parrafoOculto.style.display=="none"){
parrafoOculto.style.display="block";
}else{
parrafoOculto.style.display="none";
}
Lo curioso es que si intercambio las sentencias, me hace el primer click (me lo muestra) pero no el resto, es decir que no lo vuelve a ocultar

Bueno gente, al final se me encendio la bombilla y averigue una forma de solucionar el problema.

Como suponia el fallo viene de no tener ningun atributo style en el HTML, por lo que al generarse el arbol de nodos del DOM estas propiedades no se añaden al arbol.

Cuando desde javascript intentamos acceder a estas propiedades CSS, lo hacemos a traves del DOM, y como no estan no me evalua la condicion de la estructura IF como true y por lo tanto ejecuta directamente las sentencias del ELSE, por eso en el primer click me añade el atributo style="display:none;".

Código Javascript :

   if (parrafoOculto.style.display=="none"){
      parrafoOculto.style.display="block";
   }else{
      parrafoOculto.style.display="none";
   }

En los subsiguientes clicks que hagamos como ya se ha integrado ese atributo en el arbol de nodos la condicion del IF se evalua correctamente y por lo no hay problemas.

Entonces, como solucionar el problema del primer click? Añadiendo dos condiciones en la estructura del IF, una para el caso en que parrafoOculto.style.display=="none" y otra para el primer caso en el que no existe aun este atribuo en el arbol de nodos, es decir, parrafoOculto.style.display=""

Código Javascript :

   if (parrafoOculto.style.display=="" || parrafoOculto.style.display=="none"){
      parrafoOculto.style.display="block";
   }else{
      parrafoOculto.style.display="none";
   }

Y de esta forma solucionamos el fallo del primer click y conservamos la separacion de HTML y javascript^^

Por cierto, dejo el codigo completo por si a alguien le pueda parecer interesante

Código Javascript :

function mostrarOculto(){
   var parrafos=document.getElementsByTagName("p");
   for (var i=0;i<parrafos.length;i++){
      if (parrafos[i].className=="oculto"){
         var parrafoOculto=parrafos[i];
         break;
      }
   }
   
   if (parrafoOculto.style.display=="" || parrafoOculto.style.display=="none"){
      parrafoOculto.style.display="block";
   }else{
      parrafoOculto.style.display="none";
   }
}

window.onload=function(){   
   var parrafoMostrar=document.getElementById("mostrarOculto");
   parrafoMostrar.style.cursor="pointer";
   parrafoMostrar.onclick=mostrarOculto;   
}

OJO.. no te compliquez la vida, utiliza algun framework JS hay varios muy buenos el mas extendido aa Jquery, pero el mejor de todos MOOTOOLS.

Gracias Giordhano pero no se trata de complicarme la vida si no de aprender javascript, los framework estan muy bien y cuando tenga claro javascript me pasare a alguno de ellos, seguramente a JQuery.

Pero por ahora lo que busco es tener claro javascript para saber como funciona y como se relaciona con HTML y CSS porque es la base para crear una buena interfaz. Una vez tenga claro todo esto, me pasaré a un framework.

En definitiva, es como si te pones a aprender cakePHP sin saber nada de PHP ni MySQL...se puede hacer, pero no es lo suyo si quieres evitarte problemas despues. Yo por lo menos lo veo asi^^