Hello Qualtrics community, We want to make a dropdown list with a folded style. We use a drilldown question and initialize the question as "select2". We use the following code. But it doesn't work. We can't figure why. The CSS in Style: > li.ChoiceGroup { > background-color: #eee; > color: #444; > cursor: pointer; > padding: 18px; > width: 100%; > border: none; > text-align: left; > outline: none; > font-size: 15px; > transition: 0.4s; > } > > li.ChoiceGroup.active { > background-color: #ddd; > font-size: 20px; > } > > ul.ChoiceGroupStructure { > padding: 0 18px; > background-color: white; > max-height: 0; > overflow: hidden; > transition: max-height 0.2s ease-out; > } > > li.Selection { > padding: 0 18px; > background-color: white; > max-height: 0; > overflow: hidden; > transition: max-height 0.2s ease-out; > } > > li.Selection { > padding: 0 18px; > background-color: white; > max-height: 0; > overflow: hidden; > transition: max-height 0.2s ease-out; > } JS code: > Qualtrics.SurveyEngine.addOnReady(function() > { > /*Place your JavaScript here to run when the page is fully displayed*/ > var acc = jQuery("#" + this.questionId + " ChoiceGroup"); > var i; > > for (i = 0; i < acc.length; i++) { > acc[i].onclick = function() { > if (i == 0) { > //this.classList.toggle("active"); > var panel1 = document.getElementById("QR~QID2~1"); > var panel2 = document.getElementById("QR~QID2~2"); > var panel3 = document.getElementById("QR~QID2~3"); > if (panel1.style.maxHeight){ > panel1.style.maxHeight = null; > } else { > panel1.style.maxHeight = "15px"; > }; > if (panel2.style.maxHeight){ > panel2.style.maxHeight = null; > } else { > panel2.style.maxHeight = "15px"; > }; > if (panel3.style.maxHeight){ > panel3.style.maxHeight = null; > } else { > panel3.style.maxHeight = "15px"; > }; > > }; > > if (i == 2) { > //this.classList.toggle("active"); > var panel4 = document.getElementById("QR~QID2~4"); > var panel5 = document.getElementById("QR~QID2~5"); > var panel6 = document.getElementById("QR~QID2~6"); > if (panel4.style.maxHeight){ > panel4.style.maxHeight = null; > } else { > panel4.style.maxHeight = "15px"; > }; > if (panel5.style.maxHeight){ > panel5.style.maxHeight = null; > } else { > panel5.style.maxHeight = "15px"; > }; > if (panel6.style.maxHeight){ > panel6.style.maxHeight = null; > } else { > panel6.style.maxHeight = "15px"; > }; > > }; > > if (i == 3) { > //this.classList.toggle("active"); > var panel7 = document.getElementById("QR~QID2~7"); > var panel8 = document.getElementById("QR~QID2~8"); > var panel9 = document.getElementById("QR~QID2~9"); > if (panel7.style.maxHeight){ > panel7.style.maxHeight = null; > } else { > panel7.style.maxHeight = "15px"; > }; > if (panel8.style.maxHeight){ > panel8.style.maxHeight = null; > } else { > panel8.style.maxHeight = "15px"; > }; > if (panel9.style.maxHeight){ > panel9.style.maxHeight = null; > } else { > panel9.style.maxHeight = "15px"; > }; > > }; > > > }; > }; > > }); Can you help us solve this problem? Thanks a lot!