Hide Radio Buttons inside Side by Side Question | XM Community

Hide Radio Buttons inside Side by Side Question

  • 13 October 2022
  • 8 replies
  • 118 views

Userlevel 1
Badge +2

I want to hide the 4 radio buttons inside the Side by Side Question. See attached image.
image.png I tried coding by using CSS and JavaScript but all were not working.


8 replies

Userlevel 7
Badge +27

Hi there, adding the below to the HTML <> of the question using the Rich Content Editor is working on my end:

Click to write the question text

Userlevel 1
Badge +2

https://community.qualtrics.com/XMcommunity/discussion/comment/50782#Comment_50782wow!. this code works! thank you Tom_1842 for the solution!

Userlevel 4
Badge +16

Thank you so much Tom_1842 for taking time out of your day to create this custom code solution! 👏

Badge +3

Hi Tom,
Can you explain the HTML? I am also working on a side-by-side question, but my answers are numeric text boxes instead of radio buttons. I would like hide and disable the certain text boxes under square feet column for vegetables crops grown in-field, Fruit trees,, Grapes, Other non-tree fruit, Nut crops, Some other specialty-type crops and Row crops. Thank you in advance.
Screenshot 2022-11-20 154750.jpg

Userlevel 7
Badge +27

Hi FJSandy the method that is being used here is applying CSS to just this survey page by including the CSS within the Question Text's HTML. To get the elements to add "display: none" to, I used the browser developer tools by previewing the unmodified question and hitting F12, navigating to the element, and then copying its selector, like in the below:
SBSradiohide1.pngI also grab the selector for the td.last so that the highlighting doesn't span across the hidden cell.
SBSradiohide2.pngOnce I have all the selectors, I removed the QID bit and then put the new CSS rule in a
Click to write the question text
SBSradiohide3.png

Badge +3

Tom,
Thank you for the detail explanation. I really appreciate your help. Thank you again.

Badge +3

Hi Tom,
In my original request for help, I forgot to mention that I am displaying crops that were selected in another question (carry forward). I am mentioning this because the above syntax works perfectly when all 10 crops are selected but not so well when I crop 1, crop 4, and crop 4 are selected. How can I modify the syntax to accommodate this wrench? Thank you in advance

Userlevel 7
Badge +27

Hi FJSandy , I don't think using "nth child" method will work for that. Instead, try going a level deeper and selecting the IDs of the text input elements. Update the below with the QID of your SBS question and then add it as Custom CSS in the Style section of your survey's Look & Feel.
SBSradiohide4.png#QR\\~QID6\\#2\\~x1\\~1\\~TEXT,
#QR\\~QID6\\#2\\~x3\\~1\\~TEXT,
#QR\\~QID6\\#2\\~x4\\~1\\~TEXT,
#QR\\~QID6\\#2\\~x5\\~1\\~TEXT,
#QR\\~QID6\\#2\\~x7\\~1\\~TEXT,
#QR\\~QID6\\#2\\~x8\\~1\\~TEXT,
#QR\\~QID6\\#2\\~x10\\~1\\~TEXT {
display: none;
}

Leave a Reply