Java to Default to Open Accordion in Mobile Friendly Matrix - Expand Statement | XM Community
Question

Java to Default to Open Accordion in Mobile Friendly Matrix - Expand Statement

  • 1 November 2019
  • 3 replies
  • 33 views

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

3 replies

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");});
}
Userlevel 6
Badge +18
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.

!



!
@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). "

Leave a Reply