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!