Expand answer options in a multi-select question | XM Community
Skip to main content

Hello!

I have a multi-select list of options. The client wants that when one of the options is clicked, to display a sub-list of options, as below. Is this possible?
Answer 1
Answer 2
Answer 3
Answer 4 [-> when selected, a secondary list of answers shows up within the same question, not as a separate question below with in-page display logic]
Answer 4.1
Answer 4.2
Answer 4.3
Answer 4.4
Thanks a lot!

Hi there, if you still need, I recently tackled a post that I think might work here too. Try creating a Multiple Choice question that is set to Allow multiple answers and giving it 8 choices.
Then, add the below to the question's JavaScript in the OnReady section:
var qid = this.questionId;

var row5= jQuery("#"+this.questionId+" input[choiceid=5]").closest("li");
var row6 = jQuery("#"+this.questionId+" input[choiceid=6]").closest("li");
var row7= jQuery("#"+this.questionId+" input[choiceid=7]").closest("li");
var row8 = jQuery("#"+this.questionId+" input[choiceid=8]").closest("li");

row5.hide();
row6.hide();
row7.hide();
row8.hide();

this.questionclick = function(event, element) {

    var selectedChoice = this.getSelectedChoices()
    console.log(selectedChoice)
    if (selectedChoice.includes("4")) {
      row5.show();
      row6.show();
      row7.show();
      row8.show();
}else{
      row5.hide();
      row6.hide();
      row7.hide();
      row8.hide();
      jQuery("inputhid='QR\\~"+qid+"\\~5']").prop('checked',false);
      jQuery("inputdid='QR\\~"+qid+"\\~6']").prop('checked',false);
      jQuery("inputcid='QR\\~"+qid+"\\~7']").prop('checked',false);
      jQuery("inputcid='QR\\~"+qid+"\\~8']").prop('checked',false);
}

}


I have function called mcSubChoices that is a lot more flexible. It supports any number of choices and subchoices without having to do any custom coding.


TomG cool function! Definitely more flexible, and closer to what the poster was looking for.
I should have thought about Choice Groups. I'll just add to my post that assigning options 5,6,7,8 to a Choice Group and adding the below line to the JavaScript will add the indent to the sub-options.
jQuery("#"+this.questionId+" .ChoiceGroup").css({"display":"none"});


Leave a Reply