Show/Hide Div using jquery inside richtable

Question

I have a Rich Faces table which has data contained in div. I want to show an another div when you mouseover a particular row on richtable row to show extra data associated with that record and hide a div when mouseout using jquery. I am able to show/hide div using jquery. But problem is it is showing/hiding every div tag associated with each of the row instead of showing/hiding div of a particular row. How do i make sure only the row that i mouseover shows the div tag associated with it only?

Here is the code snippet:

<s:div style="float:left; ">
  <rich:dataTable id="pendingOptyTbl" value="#{searchResultList}"
    var="item" style="border: none; float: left;width:100%;">  
      <rich:column style="border: none;">
          <s:div style="position:relative;height: 35px;">
            <s:div style="float:left; width: 700px; " >
               <a4j:outputPanel style="width: 700px;" onmouseout="jQuery('accountDetails').hide();"   onmouseover="jQuery('.accountDetails').show();">
                    <s:div>
                           <h:outputText value="#{searchController.getCapitalizeName(item.label)} : " >
                    </s:div>
               </a4j:outputPanel>
            </s:div>
        <s:div  style="float:left;top:-10px;right:80px; width:360px;position:absolute;" styleClass="searchDetailsClass">
                <a4j:outputPanel id="searchDetails" ajaxRendered="true" styleClass="accountDetails">

I tried doing this way...livedemo.exadel.com/richfaces-demo/richfaces/jQuery.jsf ...but doesn't seem to work ...any help would be appreciated... — user1555524

Vladimir M. Vladimir M. · Accepted Answer · 2012-11-30T12:52:00

Maybe not the best solution, but you could try jQuery id selector with row index:

<h:form id="form">
    <rich:dataTable id="table" rowKeyVar="idx" ...>
        <rich:column>
        ...
            <a4j:outputPanel onmouseover="jQuery('#form\\:table\\:#{idx}\\:searchDetails').show();"
                onmouseout="jQuery('#form\\:table\\:#{idx}\\:searchDetails').hide();">

You can find out the resulting id of <a4j:outputPanel id="searchDetails"> with Firebug.

Show/Hide Div using jquery inside richtable

2 Answers