Matrix CSS/JS Toggle Sections Closed on the Accordion | XM Community
Skip to main content
Solved

Matrix CSS/JS Toggle Sections Closed on the Accordion

  • December 29, 2020
  • 4 replies
  • 31 views

pogi
Level 2 ●●
Forum|alt.badge.img+14

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

Best answer by ahmedA

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();

4 replies

Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • December 29, 2020

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()



pogi
Level 2 ●●
Forum|alt.badge.img+14
  • Author
  • Level 2 ●●
  • December 30, 2020

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.


pogi
Level 2 ●●
Forum|alt.badge.img+14
  • Author
  • Level 2 ●●
  • December 30, 2020

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();


Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • Answer
  • December 30, 2020

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();