Community Groups are officially here!
We've released Groups, a new feature that enables us to connect community members of similar industries and interests in a shared, private space. You can check out all of the details here, including information about who can join, how to join, and what Groups are currently offered. Please leave your feedback through this Community Groups Feedback Survey.

How to make a dropdown list with a folded style?

cqulihui
cqulihui Community Member Qubie ✭

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!