I have code like below in my html file

  <div class="payment-option _collapsible opc-payment-additional discount-code"
     data-bind="mageInit: {'collapsible':{'openedState': '_active'}}">
    <div class="payment-option-title field choice" data-role="title">
        <span class="action action-toggle" id="block-comment-heading" role="heading" aria-level="2">
            <!-- ko i18n: 'Customer Note'--><!-- /ko -->
    <div class="payment-option-content" data-role="content">
        <form class="form form-discount" id="comment-form">
            <div class="payment-option-inner">
                <div class="field">
                    <label class="label" for="comment-code">
                        <span data-bind="i18n: 'Enter your comment'"></span>
                    <div class="control">
                        <textarea class="input-text" id="comment-code" name="comment-code" rows="2" maxlength="200" data-bind="attr:{placeholder: $t('Enter comment')} " ></textarea>

Which opens tab on clicking the Customer Note text, how to open the tab on page load itself. please anybody suggest me.

2 Answers 2


You need to set active to true:


data-bind="mageInit: {'collapsible':{'openedState': '_active'}}">


data-bind="mageInit: {'collapsible':{active: true, 'openedState': '_active'}}">

See https://devdocs.magento.com/guides/v2.2/javascript-dev-guide/widgets/widget_collapsible.html for more options.


You can open this tab on page load itself by below script:

    jQuery(window).on("load", function () {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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