Hiding column#2 in a side-by-side Question, and revealing it upon selection of choices in column#1 | XM Community
Skip to main content

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.
image.pngLogic: 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.
image.pngAppreciate if someone could help please. Thank you.

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_checked0].parentElement.className == all_checked1].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_checked0].parentElement.className == all_checked1].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.

Hi ahmedA,
Yes, it works fine. Thanks a lot!

Very nice code. Thank you!

Leave a Reply


Terms & Conditions