Hide options in a side by side question | XM Community
Skip to main content
In a side by side question I have 3 columns and 4 items. The first two columns contain items with text entry options, the third with a MC option. In the second column I just want to display the text entry field of the first item, the other 3 need to be hidden.

!



How can I set-up this? Using JavaScript? Does somebody have an example?
You can use this Javascript code to hide:



$('QR~QID25#2~2~1~TEXT').up('td').childElements().invoke('hide');



You will have to look up the bolded text for your instance. You can do that in survey preview by right clicking in the box and choosing Inspect or Inspect Element. It should follow the pattern



Qualtrics question ID + column number + row number + column within column number + TEXT



So you will generally have: QR~_____#2~2~1~TEXT; QR~_____#2~3~1~TEXT; QR~_____#2~4~1~TEXT
Thanks bstrahin. This works Only I changed the code a bit to be undependent on the questionnumber. The code is now as follows:



var qid = this.questionId;

$('QR~'+qid+'#2~2~1~TEXT').up('td').childElements().invoke('hide');

$('QR~'+qid+'#2~3~1~TEXT').up('td').childElements().invoke('hide');

$('QR~'+qid+'#2~4~1~TEXT').up('td').childElements().invoke('hide');
Hi there, how do you do this for a likert selection instead of a text entry? Thanks
Hi Paola,

Just remove the ~TEXT in the code and it works for Likert selection.



Success!
@Nico_Leussink - Excellent - thanks very much!!

Hi Nico_Leussink - Thanks for the guidance on this - I'd like to take this a step further and hide a drop down in a specific row / column based on certain criteria being piped in from some embedded data fields.

I have two statements which pull through names of venues
QC_Food_Venue_1_Name
QC_Food_Venue_2_Name

Each venue has the meals it offers defined via these variables
QC_Food_Venue_1_Meals
QC_Food_Venue_2_Meals
So if there were 3 venues there would be a 3rd pair of embedded data sets. (Ideally I could have just one variable detailing the meals but this is per site as some sites may have more than one venue and in the future maybe even more. If a site only has 1 venue, then the embedded data for QC_Food_Venue_2_Name would be blank.)
It describes whether they serve all or a mixture of Breakfast, Lunch and Dinner.

I have setup a side by side question looking like this:
image.png
What I'd like to do is to hide the drop down for a venue (eg venue 1) which doesn't serve lunch. But venue 2 may still offer lunch. This means I can't do a straight display logic for the column but will need to use the .invoke('hide') syntax in some javascript. Please could you give me some direction in the javascript to use for this?
To keep it simple I'd be happy to use static if statements and hard coded embedded data field names with a loop using an array to make the coding more usable for other questions in the future.
My guess would be to setup an array variable (Venue_Name) with the two names (QC_Food_Venue_1_Name and QC_Food_Venue_2_Name) in, then in another array variable (Venue_Meals) add the two names (QC_Food_Venue_1_Meals and QC_Food_Venue_2_Meals). Then for the first (QC_Food_Venue_1_Name) check in QC_Food_Venue_1_Meals if the term 'Breakfast' is found (or whatever is labelled in the first column of the side by side question). If it's not found, then that specific drop down should be hidden or greyed out. My problem is not necessarily looping through an array (there are probably quite a few examples out there that will do this) but how you relate row 1 column 1 to this for a drop down.

My knowledge of JavaScript is preventing me from achieving this so with your help I'm hoping you or someone can advise on a loop with if AND logic script to get me going.

Many thanks

Rod Pestell

Hi All, I’m catching up on this thread again.  I now need to cycle through a previous side by side question and hide / disable the came corresponding cell in the current side by side question if a specific choice has been selected (eg. ‘I didn’t eat here’).  I’m just manually trying to hide the cells first but can’t even get past this point.

 

Can someone please confirm if I simply do:

Qualtrics.SurveyEngine.addOnload(function()

var qid = this.questionId;
jQuery('QR~'+qid+'#1~1').up('td').childElements().invoke('hide');

});

to hide the first cell?

It doesn’t seem to be working so I guess it’s not right

 

Thanks

 

Rod Pestell

 

 

Leave a Reply


Terms & Conditions