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

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!

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!

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

});

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

    });

});
});