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.