Matrix CSS/JS Toggle Sections Closed on the Accordion | XM Community
Solved

Matrix CSS/JS Toggle Sections Closed on the Accordion

  • 29 December 2020
  • 4 replies
  • 11 views

Userlevel 3
Badge +8
  • Level 2 ●●
  • 148 replies

Is there a method to have by default all sections closed? I have some text populating the statements which is throwing the accordion off. I noticed that if I close the first section then reopen then everything is displayed perfectly.
Screen Shot 2020-12-28 at 10.56.03 PM.pngScreen Shot 2020-12-28 at 10.56.20 PM.png

icon

Best answer by ahmedA 30 December 2020, 07:34

View original

4 replies

Userlevel 7
Badge +21

Its usually only the first statement of a matrix that's expanded. So just add this to your question JS and it should close:

document.getElementById("header~"+this.questionId+"~1").click()


Userlevel 3
Badge +8

ahmedA , thank you for your reply. This mostly works but still doesn't solve it. The solution closes the first statement, which I thought would be all I needed. It still doesn't look as professional as in the second image in my opening post. This is what it looks like now:
Screen Shot 2020-12-29 at 9.41.11 PM.pngOnce I click to open the first statement, then the closed statements pop to looking correctly.

Userlevel 3
Badge +8

I played around with your solution. If I do this, it works:
document.getElementById("header~"+this.questionId+"~1").click();
document.getElementById("header~"+this.questionId+"~2").click();
document.getElementById("header~"+this.questionId+"~3").click();
document.getElementById("header~"+this.questionId+"~4").click();
document.getElementById("header~"+this.questionId+"~5").click();
document.getElementById("header~"+this.questionId+"~6").click();
document.getElementById("header~"+this.questionId+"~7").click();
document.getElementById("header~"+this.questionId+"~1").click();

Userlevel 7
Badge +21

okay. Didn't expect that.
In order to avoid repeating the statements. You can use this:
qid = this.questionId;
choices = this.getChoices();

choices.forEach(item => {document.getElementById("header~"+qid+"~"+item).click();});
document.getElementById("header~"+this.questionId+"~1").click();

Leave a Reply