KnockoutJS - How to hide certain elements inside foreach using Observable Arrays?-CodePudding

I have a list of WebsiteOwners. I'm trying to build a UI which will display more information about the owners when I click on them.

       this.toExpand = ko.observableArray(); //initialize an observable array
       this.invertExpand = ko.observable("");


        this.invertExpand = function (index) {
                if (self.invertExpand[index] == false) {
                self.invertExpand[index] = true;
                alert(self.invertExpand[index]); //testing whether the value changed
            }
            else {
                self.invertExpand[index] = false;
                alert(self.invertExpand[index]); //testing whether the value changed
            }
           
        };

Here's the HTML code :

  <div data-bind="foreach: WebsiteOwners">
  <div>
        <button data-bind="click: $root.invertExpand.bind(this,$index())" >>Click to Expand</button>
    </div>
  <div data-bind="visible: $root.toExpand()[$index]">
   
  

  Primary Owner: <span data-bind="text:primaryOwner"></span>
  Website Name : <span data-bind="text:websiteName"></span>
  //...additional information

  </div>
  </div>

CodePudding user response：

You can store one of your WebsiteOwner items directly in your observable. No need to use an index.

Don't forget you read an observable by calling it without arguments (e.g. self.invertExpand()) and you write to it by calling with a value (e.g. self.invertExpand(true))

I've included 3 examples in this answer:

One that allows only a single detail to be opened using knockout
One that allows all details to be opened and closed independently using knockout
One that does not use knockout but uses plain HTML instead