+3
I would like to add a button to display more information if the respondent wants to see. By default the details will be hidden and on clicking the button it should toggle between displaying the details and hiding it again. How can it be done?
I have found the code on how to do it using JS but dont know how to make it work using Jquery.
It is the fourth answer in the link..
Hide and show text by click on div
Best answer by TomG
View original
+27
JS:
jQuery("#button").click(function() {
jQuery("#infodiv").toggle();
});
HTML:
+3
Wow. This worked perfectly. You are awesome TomG. Really appreciate the prompt response. You are incredible!
+8
Thanks TomG - I had a user want this capability. I searched the community, found this, and it works. NOTE for noobs like me...you need both the JS in the question's JS and the HTML in the question. Change "Button Text" to whatever you want it to say (I like "more/less") and put the text you want to hide / show where the word "Information" is.
+1
Wow, this works really well. Thanks for posting it here.
I know it has been a while but can I ask a total noob question?
Say I wanted to have multiple custom buttons on a page. Let's also say I wanted to measure which of these buttons get clicked (to reveal the text - which varies from button to button) and which do not. Ideally, we would see the order in which they get clicked too...
Do you think that would be possible? If yes, how would I do that?
Many thanks for your advice :)
+27
https://www.qualtrics.com/community/discussion/comment/32681#Comment_32681Yes, it is possible. You would collect the data needed inside your click event handler and save it to Qualtrics embedded data fields.
Hi,
Thanks for the code! For me it is not working however. I get a button with 'Button text' as I copy the code in the HTML view, but when I click at it, the hidden text will not show.
Any clue how I can fix this? Thanks in advance :)
Ah, I did not know that you had to add the JavaScript too, it works now.
Hi everyone, I am also trying to create a button that can be toggled on/off in the question to show additional information. My problem is the text I want the button to show includes piped text, and I can't find any information on whether it is possible to have piped text inside HTML. Appreciate any advice you have.
+27
https://www.qualtrics.com/community/discussion/comment/37411#Comment_37411Yes, you can pipe text into html.
https://www.qualtrics.com/community/discussion/comment/37415#Comment_37415Hi TomG , thanks for the reply. How exactly can I pipe text into html? When I use the source code editor in the rich content editor, the pipe text button is grayed out. And when I directly type the piped text into the html code it doesn’t work. I’m all out of ideas and would appreciate any explanation. Thanks!
Sorry just figured out I made a mistake in the piped text! It's working now, thanks very much TomG !
TomG Hi Tom, I have run into a new problem with my html clickable button. Everything works perfectly when I preview the question, but when I preview block or preview survey, the button doesn't work. I have no idea why this is happening and would really appreciate any advice you have. Thanks!
This is my javascript for the question:
jQuery("#button").click(function() {
jQuery("#collapseInst").toggle();
});
And this is the html:
Click 'Show/hide instructions' if you need to review the instructions again.
+27
Put the JS in the addOnload function.
I'm a total newbie. I think this is the solution to the problem I have - I want more information/text to be visible to people if they click on a word, probably as a pop-up window. I've entered the html and made a button, but nothing happens when I click on it. I can't see a 'cog on the left' (as some have mentioned) in order to do the 'addOnload' - I don't know what this means at all, but gather I need to do this then copy the JS code too? Any help would be very much appreciated! Thanks.
+8
Lapwing Did you take note of this?
NOTE for noobs like me...you need both the JS in the question's JS and the HTML in the question. Change "Button Text" to whatever you want it to say (I like "more/less") and put the text you want to hide / show where the word "Information" is.
https://community.qualtrics.com/XMcommunity/discussion/comment/40449#Comment_40449Yes but I don't understand how to do the JS - people refer to 'onload' and I don't know what that means. Or do I just paste the JS code and then the html? Do I change anything in the JS code? Thanks
+27
https://community.qualtrics.com/XMcommunity/discussion/comment/40450#Comment_40450Click on the question the right click on the ... in the upper right, then choose Add JavaScript. Paste the JS code where it says '/*Place your JavaScript here to run when the page loads*/'.
For the html, click on the Question Text then click the HTML View tab. Paste the html were you want the button/info text to appear in the Question Text.
https://community.qualtrics.com/XMcommunity/discussion/comment/40453#Comment_40453Thanks, that helped! However, now nothing appears below the button (or the expanded text if the button is clicked) - what have I done wrong?
+1
Hi,
I was wondering how I can use the button to reveal another answer option in a multiple choice question. Participants for my survey should ideally be able to keep clicking the same button (max. 36x) to display more options if they wish. I've been successful in adding the button so far, do I add to the existing code or would this need a different approach?
Thanks!
+27
https://community.qualtrics.com/XMcommunity/discussion/comment/42451#Comment_42451That would require different code.
+1
https://community.qualtrics.com/XMcommunity/discussion/comment/42455#Comment_42455Hi Tom, thank you for getting back so quickly. Would you be able to help me with this different code? Or direct me to a page that could? I'm finding it difficult to find.
Thanks again.
+27
https://community.qualtrics.com/XMcommunity/discussion/comment/42457#Comment_42457I don't know of any code that addresses your specific need. You probably need to write it from scratch.
Hi there,
I've been following this thread (total newbie here!) and I've followed the instructions to set up a 'more/less' button for questions with details on a participant information sheet they need to read prior to consenting to the study.
I've managed to get it so that when I preview individual questions, each 'more/less' button works, however when I preview it on a page, the clicking the 'more/less' button for the first question (i.e. 'What will happen to me if I take part?' expands with the relevant text - the next questions show on the same page, but none of the more/less buttons work...any ideas? I'm assuming it's how I'm setting up the JS to run as it's only working for the first question and not the others...?
This is the HTML code:
+27
https://community.qualtrics.com/XMcommunity/discussion/comment/45808#Comment_45808html ids should be unique to the page. Use classes if you want to identify groups of things.
+8
Hi all (RachDH, uniproject)
sorry I'm late to respond (was on vacation). To the issue about using it on the same page, this is what we tell our users:
NOTE: If you want to use this code more than once in the same block, you need to change the IDs in both the JS and the HTML. For example, change button id = "button" to button id = "button2" and the div id from infodiv to infodiv2 in both the JS and the HTML.
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.