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

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 inputeid] name]", $this).on("change", function () {
        if (isMobile && jQuery(this).closest(".ChoiceRow").nextAll(".ChoiceRow").length === 0) {
            jQuery(this).closest(".ChoiceRow").find("thCid]").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 -

 

 

 

 

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

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.

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!

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

Thanks.

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]uname]", $this).on("change", function () {
    if (isMobile && jQuery(this).closest(".ChoiceRow")e0] === lastRowa0]) {
		lastRow.find("thnid]").click();
	}
});

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

 

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]uname]", $this).on("change", function () {
    if (isMobile && jQuery(this).closest(".ChoiceRow")e0] === lastRowa0]) {
		lastRow.find("thnid]").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!

 

Leave a Reply


Terms & Conditions