Hiding column#4&6 in a side-by-side Question, only revealing it when previous column is selected | XM Community
Skip to main content

image.pngIn this table, I would like to hide column #4 and #6 when the survey enters into the page, and to reveal these columns only when the previous column (e.g. did you drink alcohol?) is selected yes. Out of the 10 days, only one day needs to be selected yes for the hidden column to show.
I tried to apply the display logic on the question, but it does not reveal the columns right away. It only reveals the columns when I am on the next page and press the back button. I am trying to find a J/S script to help with the issue.

Faiyaz_Omerjee
You can write JS to hide and show it based on clicks, you can even keep it all the time and disable or enable it on option click.
The following thread should help you customize it.
Hiding column#2 in a side-by-side Question, and revealing it upon selection of choices in column#1 — Qualtrics XCommunity
Hope it helps!


Thanks for the resource Deepak! I'm working on the code right now and will see where it takes me.


I got this far...
image.pngI'm struggling to create a code that will allow the columns to appear. So far, both columns stay hidden even after I create a script.
I am pretty new to JS so I'm sure there's something that I am not picking up on.


Faiyaz_Omerjee
You can use the below code, let me know if it works for you.
Qualtrics.SurveyEngine.addOnReady(function () {


    var qid = jQuery("#"+this.questionId+"").prop('id');

    // Hide SBS2 to start with
      jQuery("#"+this.questionId+" .SBS4").hide();
jQuery("#"+this.questionId+" .SBS6").hide();




   jQuery("#"+qid+"").click(function () {
        setTimeout(() => {
            var all_checked = jQuery("#"+qid+"").find("td.SBS3.c10.AnswerCell .q-checked").length
console.log(all_checked)
            
            // Show SBS4/6 if 1
            if ( all_checked == 1 ) 
{
                   jQuery("#"+qid+"").find('.SBS4').show();


            }

if (all_checked == 0) 
{ // Hide SBS4/6 otherwise
                 jQuery("#"+qid+"").find('.SBS4').hide();

            }

            var all_checked = jQuery("#"+qid+"").find("td.SBS5.c17.AnswerCell .q-checked").length
            
            // Show SBS4/6 if 1
            if ( all_checked == 1 ) 
{
                 
jQuery("#"+qid+"").find('.SBS6').show();

            }

if (all_checked == 0) 
{ // Hide SBS4/6 otherwise
                
jQuery("#"+qid+"").find('.SBS6').hide();
            }
        }, 100);
    })
});


Hope it helps!


  1. Hiding the columns isn't a good option. Since you'll have to either hide or show the entire column, selecting yes on any one of the options will necessitate showing the entire column.

  2. I would recommend enabling/disabling the text input field based on the answer given. Here's a demo: https://iima.au1.qualtrics.com/jfe/preview/previewId/6caf466c-0db6-4964-a292-5ac372c61942/SV_4UvrcAjPQLSvewS?Q_CHL=preview&Q_SurveyVersionID=current

The JS for the demo above is below.

The arguments to the sbs_column_toggle function at the end can be changed based on your requirement. They follow this order:
(control_column, enable_option, target_column)

  1. control_column is the SBS column that is used to enable/disable the target_column

  2. target_column is the one that contains the input you want to enable/disable

  3. enable_option is the option that will enable the input in the target_column

As shown in the demo above, you can use a column to control multiple other columns. In the demo, column 3 is being used to control columns 4 and 2. If option 1 is selected, column 4 will be enabled, if option 2 is selected, column 3 will be enabled.
Hope this helps.
Thanks.
Qualtrics.SurveyEngine.addOnReady(function () {
    const quest = this;
    const qc = quest.questionContainer;


    const sbs_column_toggle = function (control_column, enable_option, target_column) {
        const control_options = qc.querySelectorAll(".Choice .SBS" + control_column);
        const enable_column = control_optionsoenable_option - 1].classList-1];


        disable_all(target_column);


        control_options.forEach((item) => {
            item.addEventListener(
                "click",
                (el) => {
                    let target_row;
                    el.target.ancestors().forEach((item) => {
                        if (item.classList.contains("Choice")) {
                            target_row = item;
                        }
                    });
                    const row_control = target_row.querySelector("." + enable_column);
                    const row_target_column = target_row.querySelectorAll(".SBS" + target_column);
                    setTimeout(() => {
                        if (!row_control.querySelector(".q-checked")) {
                            row_target_column.forEach((cell) => {
                                cell.disabled = true;
                                cell.style.opacity = "0.5";
                                cell.style.pointerEvents = "none";
                                cell.querySelectorAll(".q-checked").forEach((button) => button.classList.remove("q-checked"));
                            });
                        } else {
                            row_target_column.forEach((cell) => {
                                cell.disabled = false;
                                cell.style.opacity = "";
                                cell.style.pointerEvents = "";
                            });
                        }
                    }, 100);
                },
                false
            );
        });
    };


    const disable_all = function (target_column) {
        const all_inputs = qc.querySelectorAll(".Choice .SBS" + target_column);
        all_inputs.forEach((cell) => {
            cell.disabled = true;
            cell.style.opacity = "0.5";
            cell.style.pointerEvents = "none";
            cell.querySelectorAll(".q-checked").forEach((button) => button.classList.remove("q-checked"));
        });
    };


    sbs_column_toggle(3, 1, 4); // Selecting option 1 of column 3 enables column 4
    sbs_column_toggle(5, 1, 6); // Selecting option 1 of column 5 enables column 6
    sbs_column_toggle(3, 2, 2); // Selecting option 2 of column 3 enables column 2
});


Leave a Reply