New layout view -- accordian does not auto-close after response | Experience Community
Skip to main content
JoseS
Administrator
1 year ago
Solved

New layout view -- accordian does not auto-close after response

Level 2 ●●
Forum|alt.badge.img+3

Does anyone know how to auto-close matrix, accordian-style questions in the new layout view? (There doesn’t seem to be a th[id] element.)

Thanks for any ideas!

Best answer by Tom_1842

I think .grid-cell is only available in the desktop matrix layout. For Mobile Friendly Matrix Questions in the New Survey Taking Experience, the following is working for me to collapse a statement after an answer is selected:

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/
document.addEventListener('click', function (e) {

    const choice = e.target.closest('.likert-input');
    if (!choice) return;

    const statement = choice.closest('.matrix-statement');
    if (!statement) return;

    requestAnimationFrame(() => {
        const button = statement.querySelector('.foldout-carrot');

        if (
            button &&
            button.getAttribute('aria-expanded') === 'true'
        ) {
            button.click();
        }
    });

});
});

 

If you'd like to automatically move respondents through the matrix statements, this version collapses the current statement, opens the next one if it's collapsed, and scrolls it into view:

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/
document.addEventListener('click', function (e) {

    const choice = e.target.closest('.likert-input');
    if (!choice) return;

    const statement = choice.closest('.matrix-statement');
    if (!statement) return;

    requestAnimationFrame(() => {

        // Collapse current statement
        const button = statement.querySelector('.foldout-carrot');

        if (
            button &&
            button.getAttribute('aria-expanded') === 'true'
        ) {
            button.click();
        }

        // Find next statement
        const nextStatement = statement.nextElementSibling;

        if (
            nextStatement &&
            nextStatement.classList.contains('matrix-statement')
        ) {

            const nextButton =
                nextStatement.querySelector('.foldout-carrot');

            // Expand if currently collapsed
            if (
                nextButton &&
                nextButton.getAttribute('aria-expanded') === 'false'
            ) {
                nextButton.click();
            }

            // Scroll into view
            nextStatement.scrollIntoView({
                behavior: 'smooth',
                block: 'nearest'
            });
        }

    });

});
});

 

View original

    4 replies

    Nanditha MM
    Level 4 ●●●●
    Forum|alt.badge.img+17
    • Nanditha MM
    • Level 4 ●●●●
    • April 25, 2024

    Hi @Chipper ,

    In Qualtrics, the new layout view might not have a straightforward way to auto-close matrix questions with accordion-style formatting. You can give a try with JavaScript

    //JavaScript//

    Qualtrics.SurveyEngine.addOnload(function() {
        // Function to collapse all matrix questions initially
        function collapseMatrixQuestions() {
            var matrixQuestions = document.querySelectorAll('.MatrixQuestion');
            matrixQuestions.forEach(function(question) {
                var accordionToggle = question.querySelector('.AccordionContent');
                if (accordionToggle) {
                    accordionToggle.click(); // Simulate a click on the accordion toggle to collapse the question
                }
            });
        }

        // Call the function to collapse matrix questions on page load
        collapseMatrixQuestions();
    });
     

    Thank you!

      Level 2 ●●
      Forum|alt.badge.img+3
      • Chipper
      • Author
      • Level 2 ●●
      • April 25, 2024

      Hi, @Nanditha MM,

      Thanks so much for providing the script! Unfortunately, I think there’s something in this style that prevents your and my scripts from working.

      I am grateful for your generosity!

       

      Forum|alt.badge.img

      For anyone looking, this is how we handled auto-close matrix accordion-style questions in the newer Simple layout (using jQuery):

      Qualtrics.SurveyEngine.addOnReady(function()
      {
      	/*Place your JavaScript here to run when the page is fully displayed*/

          // 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');
          });

      });

       

      Tom_1842
      Level 8 ●●●●●●●●
      Forum|alt.badge.img+28
      • Tom_1842
      • Level 8 ●●●●●●●●
      • Answer
      • October 1, 2026

      I think .grid-cell is only available in the desktop matrix layout. For Mobile Friendly Matrix Questions in the New Survey Taking Experience, the following is working for me to collapse a statement after an answer is selected:

      Qualtrics.SurveyEngine.addOnReady(function()
      {
      	/*Place your JavaScript here to run when the page is fully displayed*/
      document.addEventListener('click', function (e) {

          const choice = e.target.closest('.likert-input');
          if (!choice) return;

          const statement = choice.closest('.matrix-statement');
          if (!statement) return;

          requestAnimationFrame(() => {
              const button = statement.querySelector('.foldout-carrot');

              if (
                  button &&
                  button.getAttribute('aria-expanded') === 'true'
              ) {
                  button.click();
              }
          });

      });
      });

       

      If you'd like to automatically move respondents through the matrix statements, this version collapses the current statement, opens the next one if it's collapsed, and scrolls it into view:

      Qualtrics.SurveyEngine.addOnReady(function()
      {
      	/*Place your JavaScript here to run when the page is fully displayed*/
      document.addEventListener('click', function (e) {

          const choice = e.target.closest('.likert-input');
          if (!choice) return;

          const statement = choice.closest('.matrix-statement');
          if (!statement) return;

          requestAnimationFrame(() => {

              // Collapse current statement
              const button = statement.querySelector('.foldout-carrot');

              if (
                  button &&
                  button.getAttribute('aria-expanded') === 'true'
              ) {
                  button.click();
              }

              // Find next statement
              const nextStatement = statement.nextElementSibling;

              if (
                  nextStatement &&
                  nextStatement.classList.contains('matrix-statement')
              ) {

                  const nextButton =
                      nextStatement.querySelector('.foldout-carrot');

                  // Expand if currently collapsed
                  if (
                      nextButton &&
                      nextButton.getAttribute('aria-expanded') === 'false'
                  ) {
                      nextButton.click();
                  }

                  // Scroll into view
                  nextStatement.scrollIntoView({
                      behavior: 'smooth',
                      block: 'nearest'
                  });
              }

          });

      });
      });

       

      Terms & ConditionsAccessibility statement