How to make div collapsible in ko template?

Question

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?

Answer 1

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 -->
        </span>
    </div>
    <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>
        <div class="actions-toolbar">
            <div class="primary">
                <button id="use-customer-balance"
                        class="action action-use"
                        name="payment[use_customer_balance]"
                        data-bind="click: sendRequest">
                        <span><!-- ko i18n: 'Use Store Credit' --><!-- /ko --></span>
                </button>
            </div>
        </div>
    </div>
</div>
<!-- /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.