Evento click y modificación de css

[Ddsdone]

Tengo un panel que se desplega cuando se lo "click", lo unico que hago es modificarle el height, el problema que dentro del "panel" hay un formulario el cual no puedo tocar porque al intentar seleccionar alguna casilla se cierra.

Código HTML:

<article id=panel> contenido</article>
 

Código CSS:

#panel{
    width:380px;
    height: 30px;
    overflow:hidden;
    float:left;
    padding: 5px;
}
 

Código Javascript:

<script>
            var article = document.getElementById("panel");
             
            article.addEventListener("click", function(e){
              this.style.height = this.style.height == "400px" ? "30px" : "400px";
            }, false);
</script>
 

Necesito saber como puedo hacer para que en ves de un click tengan q hacer dobe click para que se expanda.

o como puedo hacer para agreegar un boton que expanda toda la ventana.