How to show hide a panelgroup on click of checkbox

I have a panelgroup which has an outputText and an href link. I want this panelgroup to render based on checkbox value in below manner

1. panelgroup should render when value of checkbox is checked(true) on pageload.
2. If value of checkbox is not checked by default (on pageLoad), then panelgroup should not be visible but if user has clicked on checkbox the panelgroup should be visible.

Problem :: If the checkbox is not checked by default and user clicks on checkbox then panelgroup is not being displayed. I think because it was not rendered at pageload therefore onClick it is not able to find any span to hide/show

Here Is panelgroup code :

<h:panelGroup
                                    styleClass="showMsg#{valNumber}"
                                    rendered="#{dataItem.checkboxVal}">

                                    <h:outputText
                                        styleClass="showMsg#{valNumber}"
                                        style="margin-top: 18px; text-align: center;"
                                        value="Text Line1" escape="false"
                                        rendered="#{dataItem.checkboxVal}" />
                                    <f:verbatim>
                                        <br />
                                    </f:verbatim>
                                    <h:outputText
                                        styleClass="showMsg#{valNumber}"
                                        style="text-align: center;" value="Text Line 2"
                                        escape="false"
                                        rendered="#{dataItem.checkboxVal}" />
                                    <f:verbatim>
                                        <br />
                                        <wps:urlGeneration
                                            <a id="xyz" href="<%wpsURL.write(out);%>">ContactUs</a>
                                        </wps:urlGeneration>
                                    </f:verbatim>
                                </h:panelGroup>

If i click on checkbox, then the panelgroup is not being displayed. Here is my click javascript function.

<h:selectBooleanCheckbox id="xyz" styleClass='mycheckbox#{valNumber}' 
onclick="showShippingMsg(this,'#{valNumber}' ); "



   function showShippingMsg(checkbox, valNum){

        if(checkbox.checked){
            $(".showMsg"+valNum).css("display", "block");
         } else {
         $(".showMsg"+valNum).css("display", "none");
         }
    }