Question: I'm working on ejs-grid and I want to toggle(Expand/Collapse) a **child grid** when I click on a row in the grid.

I was able to get the row click functionality working using (rowSelected) attribute but I don't really know how to get the **current state** of a child grid(collapsed or expanded).

My Current Code

```html
toggleChildGrid(event){
    const rowIndex = event.rowIndex;
    const isCollapsed = true;
    if(isCollapsed){
        this.grid.detailRowModule.expand(rowIndex);
    }
    else{
        this.grid.detailRowModule.collapse(rowIndex)
    }
}
```

I just made the **isCollapsed** variable true but I will like that to be derived dynamically based on the state of the child grid.

Answer: 
Looks like you need to track answers for each monster, and if the are incorrect, do not allow the user to click the monster again. To do this with your current architecture, below I setup an array of answers initially set to null, meaning no answer has been given. Within the click event, we will set the monsterAnswer to be true or false based on the user's response. Hope this helps and welcome!

```js
var monsters = ["slug", "zombie", "wasp"];
var randomForMon = Math.floor(Math.random() * monsters.length);
var randMonster = monsters[randomForMon];
var user_answer = getNumber("answer_input");
var monstersAnswers = [null, null, null];

//when monster clicked, show fighting symbol and change screen
onEvent(randMonster, "click", function() {
  const monsterAnswer = monstersAnswers[randomForMon];
  if (monsterAnswer === false) {
    // don't do anything
    return;
  }
  hideElement("clickMonster_label");
  showSymbol();
  setTimeout(function() {
    setScreen("equation_screen");
  }, 1300);
  newEquation();
  var userAnswer = /* something */

  monstersAnswers[randomForMon] = correctAnswer === userAnswer;

});
```
Maybe you can just return in the click listener when the "answer\_input" !== "user\_answer".