ExpandCollapseDetails

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>