We often want to make store credit or adding gift card div collapsible on checkout page. How to make store credit or customer balance div collapsible in knockout template?


Here is the solution what I found, To add collapsible any div, we have to add three things.

  1. data-bind="mageInit: {'collapsible':{'openedState': '_active'}} on the main div.
  2. data-role="title" on the title div.
  3. data-role="content" on the content div which we want to hide/show or collapse.

I have worked on customer balance (enterprise) template to make it collapsible on checkout page. Taken the main customer-balance.html ko template in the design folder and made following changes.

Find update template below

 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
<!-- ko if: isAvailable && isActive() -->
<div class="payment-option opc-payment-additional customerbalance" id="customerbalance-placer"
     data-bind="mageInit: {'collapsible':{'openedState': '_active'}}">

     <div class="payment-option-title field choice" data-role="title">
        <span class="action action-toggle" id="block-customerbalance-heading" role="heading" aria-level="2">
            <!-- ko i18n: 'Store Credit' --><!-- /ko -->
    <div class="payment-option-content field choice" data-role="content">
        <div class="payment-option-inner">
            <span id="customerbalance-available-amount" data-bind="text: formatBalance()"></span>
            <!-- ko i18n: 'Store credit available' --><!-- /ko -->
        <div class="actions-toolbar">
            <div class="primary">
                <button id="use-customer-balance"
                        class="action action-use"
                        data-bind="click: sendRequest">
                        <span><!-- ko i18n: 'Use Store Credit' --><!-- /ko --></span>
<!-- /ko -->
  • Added data-bind="mageInit: {'collapsible':{'openedState': '_active'}} on the main div.
  • Added data-role="title" on the title div.
  • Added data-role="content" on the content div.

Please make sure to add span <span class="action action-toggle" ...> to add collapsible icon.

Hope this will help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.