Collapsing last row of matrix question in mobile/accordion view | XM Community
Skip to main content
Solved

Collapsing last row of matrix question in mobile/accordion view

  • November 22, 2024
  • 6 replies
  • 141 views
S
Level 1 ●
Forum|alt.badge.img+2

Hi,

I’m trying to get a matrix question that’s in accordion/mobile view to collapse the last row when a value is entered (like it already does for all the other rows). I found a super helpful answer here, which uses this code:

    var $this = jQuery(this.questionContainer);
    var isMobile = jQuery(".QuestionBody", $this).is(".mobile");
    jQuery(".ChoiceRow input[id][name]", $this).on("change", function () {
        if (isMobile && jQuery(this).closest(".ChoiceRow").nextAll(".ChoiceRow").length === 0) {
            jQuery(this).closest(".ChoiceRow").find("th[id]").click();
        }
    });

This works great for me, except for one minor thing -- when the user hits the next button, the last row expands again. This happens regardless of whether I add the code to ‘addOnReady’ or ‘addOnLoad.’

Any suggestions on how to keep the last row from re-expanding would be greatly appreciated - thanks -

 

 

 

 

Best answer by Tom_1842

Hi ​@VinceBirdy ​@rochak_khandelwal The below is working okay for me - it hides the elements of the last statement with CSS when the next button is clicked:

var $this = jQuery(this.questionContainer);
var isMobile = jQuery(".QuestionBody", $this).hasClass("mobile");
var lastRow = jQuery(".ChoiceRow.bottom", $this);

jQuery(".ChoiceRow input[id][name]", $this).on("change", function () {
    if (isMobile && jQuery(this).closest(".ChoiceRow")[0] === lastRow[0]) {
		lastRow.find("th[id]").click();
	}
});

jQuery("#NextButton").on("click", function () {
	if (isMobile) {
		lastRow.find("td").css({
                "visibility": "hidden",
                "height": "0px",
                "padding": "0px",
                "border": "none"
		});
	}
});

 

6 replies

J
Level 4 ●●●●
  • jbk
  • Level 4 ●●●●
  • 275 replies
  • November 25, 2024

It still works for me. Make sure you published the survey. Give a try again. 

S
Level 1 ●
Forum|alt.badge.img+2
  • surrogate-key
  • Author
  • Level 1 ●
  • 7 replies
  • November 27, 2024

Thanks - I just tried testing it again after publishing it, but yeah, I still see the last row re-expand when I move to the next question.

VinceBirdy
Forum|alt.badge.img+1
  • VinceBirdy
  • 2 replies
  • August 7, 2025

Hi Surrogate, I am facing the same issue the script works fine at collapsing the last statement but it would still expend when click the ‘Next’ button goes to the next question. 

 

Did you find the solution that can be shared? Great appreciate!  Or any Qualtrics talent here can help us? Thanks a lots in advace!

rochak_khandelwal
Level 5 ●●●●●
Forum|alt.badge.img+31
  • rochak_khandelwal
  • Level 5 ●●●●●
  • 170 replies
  • August 7, 2025

Hi ​@surrogate-key , I am also facing the same issue!
Were you able to find a solution?

Thanks.

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • 909 replies
  • Answer
  • August 7, 2025

Hi ​@VinceBirdy ​@rochak_khandelwal The below is working okay for me - it hides the elements of the last statement with CSS when the next button is clicked:

var $this = jQuery(this.questionContainer);
var isMobile = jQuery(".QuestionBody", $this).hasClass("mobile");
var lastRow = jQuery(".ChoiceRow.bottom", $this);

jQuery(".ChoiceRow input[id][name]", $this).on("change", function () {
    if (isMobile && jQuery(this).closest(".ChoiceRow")[0] === lastRow[0]) {
		lastRow.find("th[id]").click();
	}
});

jQuery("#NextButton").on("click", function () {
	if (isMobile) {
		lastRow.find("td").css({
                "visibility": "hidden",
                "height": "0px",
                "padding": "0px",
                "border": "none"
		});
	}
});

 

VinceBirdy
Forum|alt.badge.img+1
  • VinceBirdy
  • 2 replies
  • August 8, 2025

Hi ​@VinceBirdy ​@rochak_khandelwal The below is working okay for me - it hides the elements of the last statement with CSS when the next button is clicked:

var $this = jQuery(this.questionContainer);
var isMobile = jQuery(".QuestionBody", $this).hasClass("mobile");
var lastRow = jQuery(".ChoiceRow.bottom", $this);

jQuery(".ChoiceRow input[id][name]", $this).on("change", function () {
    if (isMobile && jQuery(this).closest(".ChoiceRow")[0] === lastRow[0]) {
		lastRow.find("th[id]").click();
	}
});

jQuery("#NextButton").on("click", function () {
	if (isMobile) {
		lastRow.find("td").css({
                "visibility": "hidden",
                "height": "0px",
                "padding": "0px",
                "border": "none"
		});
	}
});

OMG  you are such a great talent!  Thank you very much! Wish you have wonderful weekend!

 


Terms & ConditionsAccessibility statement