I am trying to hide and show div element based on the button that is clicked. I used if.bind and show.bind, but neither of them is working.

View:

<div class="right" if.bind="toggleView() === true" data-bind="visible: activeTab() === 'right div'">
  <p>This is a right div</p>
  <div data-bind="click: hideLeftDiv">
    <label for="TestButton">
      <svg class="ico"><use xlink:href="Content/icons/icons.svg#div" /></svg>
      <span>Test Button</span>
    </label>
  </div>
</div>
<div class="left data-bind="visible: activeTab() === 'left div'">
  <p>This is a left div</p>
</div>

and the code:

import * as dialog from 'plugins/dialog';
import * as system from 'durandal/system';
import * as ko from 'knockout';

enum divs {
    RIGHT_DIV = "Right div",
    LEFT_DIV = "Letf div"
}

class test{
  private activeTab: KnockoutObservable<divs> = ko.observable(divs.RIGHT_DIV);
  private toggleView: KnockoutObservable<boolean> = ko.observable(false);
  
  async activate(){
  }
  
  async hideLeftDiv() {
    return this.toggleView(false);
  }
}

I expect it to hide the left div element when I click the Test button div. But it is not working as expected.