Expand answer options in a multi-select question | XM Community
Question

Expand answer options in a multi-select question

  • 25 February 2021
  • 3 replies
  • 86 views

Badge

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!


3 replies

Userlevel 7
Badge +27

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("input[id='QR\\~"+qid+"\\~5']").prop('checked',false);
      jQuery("input[id='QR\\~"+qid+"\\~6']").prop('checked',false);
      jQuery("input[id='QR\\~"+qid+"\\~7']").prop('checked',false);
      jQuery("input[id='QR\\~"+qid+"\\~8']").prop('checked',false);
}

}

Userlevel 7
Badge +27

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.

Userlevel 7
Badge +27

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