Matrix response options not collapsing after selection on phone (New survey taking experience) | XM Community
Skip to main content

Hi everyone,

 

I’m fielding a ton of matrix questions in an upcoming survey. In previous surveys, I’d been able to incorporate Javascript into Qualtrics’s new survey taking experiences to have matrix response options on the phone collapse after they were selected so respondents on phones weren’t endlessly scrolling through matrix questions. I’d had Javascript for this working for a survey I’d completed back in May 2025 but that script now no longer works. Does anyone have any guidance for how to get things working in. The code I am currently using is pasted below. Any help that could be provided would be greatly appreciated.

 

Qualtrics.SurveyEngine.addOnload(function()

{

    // Remove the width limit on the question text container

    var selector = "#question-display-"+this.questionId;

    var questContainer = jQuery(selector);

    questContainer.css({

        "max-width": "100%",

    });

    

    // Adjust the width of the matrix statement container to accomodate longer statements

    var selector2 = "#question-"+this.questionId+" > div > div > div > div > div.question-content > div > div"

    jQuery(selector2).css({

        "grid-template-columns": "minmax(6.25rem, 0.4fr) 1fr",

        /*"min-width": "min-content",*/

    });

});

Qualtrics.SurveyEngine.addOnReady(function()

{

    // Attach a click event to all elements with the class 'grid-cell.accordion'

    $('.grid-cell.accordion').on('click', function() {

        let matrixStatement = $(this).closest('.matrix-statement');

        matrixStatement.find('.matrix-statement-header').trigger('click');

    });

});

Qualtrics.SurveyEngine.addOnReady(function () {

  var questionId = this.questionId;

  function foldMatrixElement(myElem) {
    const matrixStatement = myElem.closest('#question-' + questionId + ' .matrix-statement');
    if (matrixStatement) {
      const header = matrixStatement.querySelector('.foldout-header');
      if (header) {
        header.click();
      }
    }
  }

  document.addEventListener('click', function (event) {
    const likertInputElement = event.target.closest('#question-' + questionId + ' .likert-input');
    if (likertInputElement) {
      setTimeout(() => {
        foldMatrixElement(likertInputElement);
      }, 1);
    }
  });

});

 

​@vgayraud You’re a lifesaver, thank you so much for this!

Terms & ConditionsAccessibility statement