Skip to content

Show hide content using Knockout js in magento 2 on click button

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.