Does anyone have any CSS or JavaScript that overwrites the collapsed matrix statements on mobile friendly so that all statements are always expanded (accordion open for all statements). We need this for UX purposes (currently defaults to show the first statement on open accordion). Thanks
Page 1 / 1
This code works:
Qualtrics.SurveyEngine.addOnload(function()
{
toggleSectionsOpen();
this.questionclick = function(event,element){
toggleSectionsOpen();
}
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
function toggleSectionsOpen()
{
var mobileQuestionDiv = jQuery(".QuestionBody.mobile");
var rowItems = jQuery(".ChoiceRow");
var headerCells = jQuery(".ChoiceRow th");
var standardCells = jQuery(".ChoiceRow td");
var dropDownArrowContainer = jQuery(".ChoiceRow .dropdown-arrow.mobile span")
jQuery(mobileQuestionDiv).find(rowItems).each(function(index, elem){ jQuery(elem).attr("style", "height: 298px");});
jQuery(mobileQuestionDiv).find(headerCells).each(function(index, elem){ jQuery(elem).attr("aria-expanded", "true");});
jQuery(mobileQuestionDiv).find(standardCells).each(function(index, elem){ jQuery(elem).attr("aria-expanded", "true");});
jQuery(mobileQuestionDiv).find(dropDownArrowContainer).each(function(index, elem){ jQuery(elem).attr("class", "dropdown-up");});
}
Qualtrics.SurveyEngine.addOnload(function()
{
toggleSectionsOpen();
this.questionclick = function(event,element){
toggleSectionsOpen();
}
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
function toggleSectionsOpen()
{
var mobileQuestionDiv = jQuery(".QuestionBody.mobile");
var rowItems = jQuery(".ChoiceRow");
var headerCells = jQuery(".ChoiceRow th");
var standardCells = jQuery(".ChoiceRow td");
var dropDownArrowContainer = jQuery(".ChoiceRow .dropdown-arrow.mobile span")
jQuery(mobileQuestionDiv).find(rowItems).each(function(index, elem){ jQuery(elem).attr("style", "height: 298px");});
jQuery(mobileQuestionDiv).find(headerCells).each(function(index, elem){ jQuery(elem).attr("aria-expanded", "true");});
jQuery(mobileQuestionDiv).find(standardCells).each(function(index, elem){ jQuery(elem).attr("aria-expanded", "true");});
jQuery(mobileQuestionDiv).find(dropDownArrowContainer).each(function(index, elem){ jQuery(elem).attr("class", "dropdown-up");});
}
Hi @Scagas,
You can achieve this requirement without using any custom code.
Just drag the vertical separator between the scales and statements to very end (please refer the screenshot attached). This will force the question to display in the accordion by default.
!
!
You can achieve this requirement without using any custom code.
Just drag the vertical separator between the scales and statements to very end (please refer the screenshot attached). This will force the question to display in the accordion by default.
!
!
@SaurabhPujare_Ugam did you attach the wrong screen shot - I was asking for the "entire" accordion to be expanded for all statements. Your screen shot is showing 1 open and 2 closed.
"so that all statements are always expanded (accordion open for all statements). "
"so that all statements are always expanded (accordion open for all statements). "
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.