Funcion toggle ¿2 clicks para funcionar? Mi intención es en un click

[Alexis88]

Buen punto el tocado por edel. Si habrá varios comentarios, no te conviene trabajar con un id puesto que no puede repetirse. Como bien te comentan, dependerá de la estructura de tu DOM para poder determinar la mejor manera de implementar lo que necesitas.

Una estructura que se me ocurre consiste en lo siguiente:

Código HTML:

<section class="comentario">
    <article>
        El comentario
    </article>
    <div class="respuestas"></div>
    <div class="respuesta">
        <span class="toggle">Responder</span>
        <form>
            <textarea></textarea>
            <input type="submit" />
        </form>
    </div>
</section>
 

Básicamente, se trata de una sección (también puede ser un <div>) que contiene un artículo en el cual irá el comentario principal, una división para las respuestas que pueda tener y otra con un botón y un formulario para escribir la respuesta. La idea es que el formulario esté oculto y cuando se pulse el botón, se muestre y el botón se oculte. Una vez que se envíe la respuesta, se oculta el formulario y se muestra el botón.

Como algunos de los elementos son dinámicos y puede haber muchas respuestas, lo conveniente es delegar los eventos al documento. Esto sería más o menos así (puede variar según la estructura que tengas):

Código Javascript:

document.addEventListener("click", function(event){
    if (event.target.className == "toggle"){
        var form = event.target.parentNode.querySelector("form"),
            toggle = event.target;
        
        if (!form.offsetHeight){
            toggle.innerHTML = "Cancelar";                      
            form.style.display = "block";
            form.style.opacity = 1;     
            form.querySelector(".mensaje").focus(); 
        }
        else{
            toggle.innerHTML = "Responder";
            form.style.opacity = 0;
            setTimeout(function(){      
                form.style.display = "none";
            }, 150);
            form.reset();
        }
    }
}, false);
 
document.addEventListener("submit", function(event){
    event.preventDefault();
    var self = event.target,
        toggle = self.parentNode.querySelector(".toggle"),      
        respuestas = self.parentNode.parentNode.querySelector(".respuestas"),
        respuesta = self.querySelector(".mensaje").value,
        parrafo = document.createElement("p");
        
    if (respuesta.length){
        parrafo.innerHTML = respuesta;
        respuestas.appendChild(parrafo);    
        toggle.innerHTML = "Responder"; 
        self.style.opacity = 0;
        setTimeout(function(){      
            self.style.display = "none";
        }, 150);        
        self.reset();
    }
    else{
        self.querySelector(".mensaje").focus();
    }
}, false);
 

En el primer bloque, detectamos la ejecución del evento click en el documento, tomando al elemento directamente afectado mediante la propiedad event.target y comprobando que su clase sea "toggle". Si esto se cumple, quiere decir que se le dio un clic a cualquiera de los botones para responder. Dentro del bloque de instrucciones, tomamos al formulario, buscándolo en el elemento padre del botón (propiedad parentNode), además del propio botón. Enseguida, compruebo si la altura del formulario es mayor a cero (recordemos que el cero se evalúa como falso, por lo que una cifra distinta será el caso contrario, es decir, verdadero); de ser así, cambio el texto del botón por el de "Cancelar", hago visible al formulario y le doy el enfoque al área de texto del formulario; caso contrario, es decir, si el usuario cancela la respuesta, cambio el texto del botón por el de "Responder", oculto al formulario y lo limpio mediante el método .reset(). Cuando un elemento es oculto por el valor none asignado a la propiedad display, este no tiene presencia en el formulario, por lo que si posee una altura, quiere decir que es visible.

Cabe señalar que utilizo las propiedades opacity y display para darle un efecto especial al momento de mostrar u ocultar al botón o al formulario. La presencia del temporizador (método setTimeout()), se debe a que utilizo la propiedad transition de CSS3 para dilatar unas milésimas de segundo el cambio de opacidad. Si deseas, puedes trabajar solo con la propiedad display.

En el segundo bloque, detectamos la ejecución del evento submit en el documento, el cual se produce cuando se inicia el procesamiento de datos de un formulario. Acto seguido, cancelamos la ejecución de dicho evento mediante el método .preventDefault() para evitar que se recargue la página y se realice el envío. A continuación, tomamos a distintos elementos, como el formulario (que es el elemento en el cual se produjo el evento), el botón para mostrar el formulario, el bloque de respuestas, la respuesta escrita por el usuario y creamos un párrafo en el cual se insertará la respuesta. Si la longitud de la respuesta es superior a cero (el mismo caso del primer bloque de código, solo que ahora se trata de longitud y no de altura), insertamos la respuesta en el párrafo recién creado y lo adherimos al bloque de respuestas mediante el método .appendChild(). Finalmente, cambiamos el texto del formulario por el de "Responder", ocultamos a este último y lo limpiamos para que cuando se desee realizar una futura respuesta al mismo comentario, el área de texto esté vacío. Si no se ha escrito la respuesta pero se pulsa el botón de envío, solo se le dará el enfoque al área de texto.

DEMO

Y otro DEMO que muestra la fecha y hora de cada respuesta.

Como trabajamos con clases y delegando los eventos, puedes tener uno o más comentarios con una o más respuestas. Y si deseas guardar la información en una base de datos, puedes aprovechar que se cancela el evento submit para realizar una petición asíncrona (AJAX).

P. D.: Disculpa si el diseño no es adaptable; lo hice un poco rápido para efectos del ejemplo.

Un saludo