Dear All,
With reference to the picture below, I would like to hide column #2 when the survey enters into the page, and to reveal column#2 when choices in column #1 are selected (either YES&YES or NO&NO).
Initially, I tried to apply the display logic on the question for column 2. It did hide the column, but did not reveal it when the conditions are met. After some readings, it seems that display logic does not work well with SBS question. Hence, I have attempted to add JS into this question. 
Logic: hide column#2, get the recode value of choices in column#1, check condition, reveal column#2 if conditions are met.
I do not have any prior JS knowledge, but have tried to piece together solutions offered in this forum. Below is my current JS code. 
Appreciate if someone could help please. Thank you.
Hiding column#2 in a side-by-side Question, and revealing it upon selection of choices in column#1
Best answer by ahmedA
Okay. Yes that's an issue. Sorry didn't notice that I was hiding SBS2. Just delete the else block:
else { // Hide SBS2 otherwise
quest.questionContainer.querySelectorAll(".SBS2").forEach((item) => item.hide());
}
And it should work fine.
Use this JS:
Qualtrics.SurveyEngine.addOnReady(function () {
let quest = this;
// Hide SBS2 to start with
quest.questionContainer.querySelectorAll(".SBS2").forEach((item) => item.hide());
quest.questionContainer.onclick = function () {
setTimeout(() => {
let all_checked = quest.questionContainer.querySelectorAll(".q-checked");
// Show SBS2 if both are the same
if (
all_checked.length == 2 &&
all_checked[0].parentElement.className == all_checked[1].parentElement.className
) {
quest.questionContainer.querySelectorAll(".SBS2").forEach((item) => item.show());
} else { // Hide SBS2 otherwise
quest.questionContainer.querySelectorAll(".SBS2").forEach((item) => item.hide());
}
}, 100);
};
});
You may want to explore some aesthetic related customizations also.
Thank you so much, ahmedA. Your solution is able to hide and show column#2 according to the conditions.
However, it hides column#2 again when I select one of the radio buttons. I tried to adjust the first condition (please see below), but I not sure how to restrict the second condition to only column#1.
Could you advise please? Thank you!
Qualtrics.SurveyEngine.addOnReady(function () {
let quest = this;
// Hide SBS2 to start with
quest.questionContainer.querySelectorAll(".SBS2").forEach((item) => item.hide());
quest.questionContainer.onclick = function () {
setTimeout(() => {
let all_checked = quest.questionContainer.querySelectorAll(".q-checked");
// Show SBS2 if both are the same
if (
all_checked.length >= 2 &&
all_checked[0].parentElement.className == all_checked[1].parentElement.className
) {
quest.questionContainer.querySelectorAll(".SBS2").forEach((item) => item.show());
} else { // Hide SBS2 otherwise
quest.questionContainer.querySelectorAll(".SBS2").forEach((item) => item.hide());
}
}, 100);
};
});
Okay. Yes that's an issue. Sorry didn't notice that I was hiding SBS2. Just delete the else block:
else { // Hide SBS2 otherwise
quest.questionContainer.querySelectorAll(".SBS2").forEach((item) => item.hide());
}
And it should work fine.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.