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

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

  • November 1, 2019
  • 3 replies
  • 78 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

  • Author
  • December 16, 2019
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");}); }

SaurabhPujare_Ugam
QPN Level 5 ●●●●●
Forum|alt.badge.img+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. ! !

  • Author
  • December 16, 2019
@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). "