0

I want to create content show hide functionality using knockout js in shipping page. here is my html file code

<button type="submit" title="Select" class="action primary" id="rh-select-btn" data-bind="click:addCustomOptions"><span>Select</span></button>
<button type="submit" title="Select" class="action primary" id="rh-select-btn" data-bind="click:addCustomOptions2"><span>Select2</span></button>
<div>
    <p>Hey You</p>
    <div data-bind="html: window.checkoutConfig.my_block_content"></div>
</div>
<div>
    <p>Hey Dear</p>
</div>

When I click select1 button show "Hey You" data and when we click select2 button show "Hey Dear" and hide "Hey You" content. In default show select1 button data

Here is my KO js code

    define(
    [
        'uiComponent',
        'jquery',
        'ko'
    ],
    function(
        Component,
        $,
        ko
    ) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Eighteentech_Shippingtab/shipping/customblock'
            },

            initialize: function () {
                this._super();
            },

            viewModel : function () {
                shouldShowMessage: ko.observable(true);
            },

            addCustomOptions : function () {
                console.log('knock custom options');
                viewModel.shouldShowMessage(false);
            }

        });

    }
);

Can Anyone help me for this Thanks for advance.

1 Answer 1

1

You may update the js component file and the KO template as follows.

component js File

define(
    [
        'uiComponent',
        'jquery',
        'ko'
    ],
    function(
        Component,
        $,
        ko
    ) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Eighteentech_Shippingtab/shipping/customblock'
            },

            initialize: function () {
                this._super();
            },           
           shouldShowMessage1: ko.observable(false),
           shouldShowMessage2: ko.observable(false),
           showHide : function (btnval) {
                if(btnval==1){
                    this.shouldShowMessage1(true);
                    this.shouldShowMessage2(false);
                    
                }else if(btnval==2){
                    this.shouldShowMessage1(false);
                    this.shouldShowMessage2(true);              
                
               }
            }

        });

    }
);

component Template File

<button type="button" title="Select" class="action primary" id="rh-select-btn1" click="showHide.bind($data, 1)"><span>Select</span></button>
<button type="button" title="Select" class="action primary" id="rh-select-btn2"  click="showHide.bind($data, 2)"><span>Select2</span></button>
<div  data-bind="visible: shouldShowMessage1">
    <p>Hey You</p>
    <div data-bind="html: window.checkoutConfig.my_block_content"></div>
</div>
<div  data-bind="visible: shouldShowMessage2">
    <p>Hey Dear</p>
</div>

enter image description here

1
  • Is any way to call shipping flat rate template file of button click and hide of another click button May 19, 2023 at 4:47

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.