How to show/hide a JSF panelGroup with javascript?

Question

I want to show/hide a panelGroup depending on the option chosen in a selectOneMenu.

This is my code:

new.jsp

        <h:form id="formPregunta">
            <h:outputText value="Selecciona un tipo de pregunta"/>
            <h:selectOneMenu onchange="tipoSeleccionadoOnChange(this)" id="tipoSeleccionado" value="#{seleccionaTipoPreguntaBean.tipos}">
                <f:selectItems value="#{seleccionaTipoPreguntaBean.tiposValue}" />
            </h:selectOneMenu>
            <br />

            <h:panelGroup id="prueba" style="display: none">
                <h:outputText value="Enunciado "/>
                <h:inputText value=""/><br />
                <h:outputText  value="Sentencias"/>
                <h:inputText value=""/>
                <h:commandButton value=""/>
            </h:panelGroup>

        </h:form>

and this is my js script, but doesn't works.

function tipoSeleccionadoOnChange(sel) {
      if (sel.value=="2"){
           divC = document.getElementById("prueba");
           divC.style.display = "";


      }else{

           divC = document.getElementById("prueba");
           divC.style.display="none";

      }
}

Answer 1

Use rendered attribute in h:panelGroup.