Show/hide nested rich:subTable in rich:datatable

Question

I've nested a subTable inside a dataTable as follows:

                       <rich:dataTable value="#{myBean.dataList}"
                        var="dataItem"
                        >                           

                        <f:facet name="header">
                            <rich:columnGroup">
                                <rich:column><h:outputText value="Name"/></rich:column>                
                                <rich:column><h:outputText value="Value"></rich:column>                                  
                            </rich:columnGroup>
                        </f:facet>

                        <rich:column><h:graphicImage id="expand" value="../images/open.png"  /></rich:column>                           
                        <rich:column sortBy="#{dataItem.name}"><h:outputText value="#{dataItem.name}" /></rich:column>
                        <rich:column sortBy="#{dataItem.value}"><h:outputText value="#{dataItem.value}" /></rich:column>                         

                    <rich:subTable value="#{dataItem.innerList}" var="innerItem">
                    <rich:column>   
                           <h:outputText value="#{innerItem.name}" /> <br />

                           <h:outputText value="#{innerItem.value}" /> <br />
                      </rich:column>               

                      </rich:subTable>

                   </rich:dataTable>

Currently this displays all info in a row and corresponding info underneath it. I would like to be able to use javascript or jquery to click on image in first column which will show or hide the related subTable underneath. I've tried show/hide with divs which works with text on my jsf page but when I put the div around the subTable it doesn't work. If anyone could give me a nudge in the right direction I'd be extremely grateful