How to make a dropdown list with a folded style?

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!