You can review the details on the expandCollapseDetails JavaScript function.

Description

This JavaScript function toggles the display state of the specified tags that have expanded and collapsed views.

Syntax

expandCollapseDetails(div_id, expandAlt, collapseAlt, expandgif, collapsegif)

Input parameters

div_id – Required. Identifier of the object to expand or collapse.

expandAlt – Required. Tooltip to show for expanding a selection. This tooltip shows when the object is in a collapsed state.

collapseAlt – Required. Tooltip to show for collapsing a selection. Available when the object is an expanded state.

expandgif – Required. Image to show when the selection is in a collapsed state.

collapsegif – Required. Image to show when the selection is in an expanded state.

Return value

None.

Example

This example shows how the expandCollapseDetails() function can be used in a table to hide some advanced information that the user can retrieve by selecting a special icon at line level. The example shows how payment collection details, such as credit card number, can be viewed by selecting the plus (+) icon. The example also shows div, which enables you to specify whether to hide or show information. By default, the div is hidden (display:none).

<tbody>
	<yfc:loopXML
binding="xml:/Order/ChargeTransactionDetails/@ChargeTransactionDetail" 
id="ChargeTransactionDetail">
   <%request.setAttribute("ChargeTransactionDetail", 
YFCElement)pageContext.getAttribute("ChargeTransactionDetail"));%>
    <yfc:makeXMLInput name="InvoiceKey">
      <yfc:makeXMLKey binding="xml:/GetOrderInvoiceDetails/@InvoiceKey" 
value="xml:/ChargeTransactionDetail/@OrderInvoiceKey" />                                                       
     </yfc:makeXMLInput>
     <tr>
        <td class="tablecolumn"
sortValue="<%=getDateValue("xml:ChargeTransactionDetail:/
ChargeTransactionDetail/@Createts")%>">
       <yfc:getXMLValue 
binding="xml:/ChargeTransactionDetail/@Createts"/>
        </td>
        <td class="tablecolumn"> 
        <yfc:getXMLValue 
binding="xml:/ChargeTransactionDetail/@ChargeType"/>
        <% if 
(equals("AUTHORIZATION",getValue("ChargeTransactionDetail",
"xml:/ChargeTransactionDetail/@ChargeType")) || 
equals("CHARGE",getValue("ChargeTransactionDetail",
"xml:/ChargeTransactionDetail/@ChargeType"))) {%>
                <% String divToDisplay="yfsPaymentInfo_" + 
ChargeTransactionDetailCounter; %>
                <img onclick="expandCollapseDetails('<%=divToDisplay%>',
'<%=getI18N("Click_To_See_Payment_Info")%>',
'<%=getI18N("Click_To_Hide_Payment_Info")%>',
'<%=YFSUIBackendConsts.FOLDER_COLLAPSE%>',
'<%=YFSUIBackendConsts.FOLDER_EXPAND%>')" style="cursor:hand" 
<%=getImageOptions(YFSUIBackendConsts.FOLDER,"Click_To_See_Payment_Info")%>/>                       
                  <div id=<%=divToDisplay%> 
style="display:none;padding-top:5px">
                       <table width="100%" class="view">
                          <tr>
                             <td height="100%">
                                <jsp:include page="/om/Orderdetail/
order_detail_paymenttype_collections.jsp">
                                 <jsp:param name="PrePathId"
value="ChargeTransactionDetail"/>
                                 <jsp:param name="ShowAdditionalParams"
value="Y"/>
                                 <jsp:param name="DecryptedCreditCardLink" 
value="L02"/>
 
                                </jsp:include>
                               </td>
                           </tr>
                       </table>
                   </div>  
                <%}%>
           </td>
            <td class="numerictablecolumn"
sortValue="<%=getNumericValue("xml:ChargeTransactionDetail:/
ChargeTransactionDetail/@CreditAmount")%>">
               <yfc:getXMLValue binding="xml:/ChargeTransactionDetail/
@CreditAmount"/>
           </td>
        </tr>
   </yfc:loopXML> 
</tbody>

Join The Discussion

Your email address will not be published. Required fields are marked *