How to expand and collapse rows in jsf datatable?

How to expand and collapse rows in jsf datatable?

<%@ taglib uri="http://myfaces/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces/jsf/html" prefix="h"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://adesa.com/jsf/components" prefix="adesa"%>
<%@ taglib uri="http://www.adesa.com/security" prefix="security"%>
<script type="text/javascript">
 function validate() {
     return false;
}

function addOnclickToDatatableRows(row) {
   
    var trs = document.getElementById('body:form1:dt1:'+row+':hide');
   
    if(trs.style.display=='none') {
        trs.style.display='block'
    } else {
        trs.style.display='none'
    }
 }

function highlightRow(tr) {
    tr.style.display = 'none' ;
}
</script>
<f:view>
    <h:form id="form1" onsubmit="return validate();">
        <br>
        <br>
        <br>
        <t:dataTable id="dt1" rowIndexVar="row"
            value="#{TableBean.perInfoAll}" var="item" bgcolor="#F1F1F1"
            border="10" cellpadding="5" cellspacing="3" first="0" rows="4"
            width="50%" dir="LTR" frame="hsides" rules="all"
            summary="This is a JSF code to create dataTable.">
            <h:column>
           
                <t:div id="heading">
                    <h:outputText value="heading"></h:outputText>
                   
                </t:div>
                <t:div id="hide">
                    <h:outputText value="#{item.id}"></h:outputText>
                    <f:verbatim>
                        <br>
                    </f:verbatim>
                    <h:outputText value="#{row}"></h:outputText>
                    <f:verbatim>
                        <br>
                    </f:verbatim>
                </t:div>
                <h:commandLink value="show/hide"
                    onclick="addOnclickToDatatableRows(#{row})"></h:commandLink>
            </h:column>
        </t:dataTable>
        <br>
        <br>
    </h:form>
</f:view>