Adding an expand button to the descriptive text question | XM Community
Skip to main content
Solved

Adding an expand button to the descriptive text question

  • July 21, 2020
  • 10 replies
  • 2086 views

Forum|alt.badge.img

Hello,
I have a question with descriptive text. The data I want to put there is very long (Almost 5 paragraphs). The data is long but it needs to be there since it is important for my survey. Is there any way in which I can add a "more" button there so that the user can expand the text by themselves when they need it. Currently its already expanded by default.

Any leads?
Thanks a lot.

Best answer by rondev

You can take code from here, which is of button, but you can also replace button with word wrap to span tag and perform same functionality.

10 replies

rondev
Level 6 ●●●●●●
Forum|alt.badge.img+22
  • Level 6 ●●●●●●
  • Answer
  • July 21, 2020

You can take code from here, which is of button, but you can also replace button with word wrap to span tag and perform same functionality.


Forum|alt.badge.img
  • Author
  • July 21, 2020

Perfect! That works


mklubeck
Level 3 ●●●
Forum|alt.badge.img+8
  • Level 3 ●●●
  • September 2, 2020

rondev I checked out the "here" and it works - thanks. But, I wanted to try the "word wrap to span tag" but don't know what you actually mean. I see that I can change the Button Text to read whatever I want. But how do I "replace button with word wrap to span tag"?


rondev
Level 6 ●●●●●●
Forum|alt.badge.img+22
  • Level 6 ●●●●●●
  • September 2, 2020

mklubeck
Level 3 ●●●
Forum|alt.badge.img+8
  • Level 3 ●●●
  • September 2, 2020

rondev Awesome! Thanks! and thanks for the quick reply.


mklubeck
Level 3 ●●●
Forum|alt.badge.img+8
  • Level 3 ●●●
  • September 3, 2020

rondev Thanks again.
Note for all - I couldn't do two of these on the same block...they just stop working. BUT if the questions are separated into different blocks it worked!


rondev
Level 6 ●●●●●●
Forum|alt.badge.img+22
  • Level 6 ●●●●●●
  • September 3, 2020

https://www.qualtrics.com/community/discussion/comment/29920#Comment_29920You mean they are not working on same page, for this to work on same page just change the id of the second one in html and JavaScript


mklubeck
Level 3 ●●●
Forum|alt.badge.img+8
  • Level 3 ●●●
  • September 3, 2020

rondev Correct, not on the same "page"
What do you mean by the id on the second one in html and javascript? make it say button2 for example in both places?


rondev
Level 6 ●●●●●●
Forum|alt.badge.img+22
  • Level 6 ●●●●●●
  • September 3, 2020

https://www.qualtrics.com/community/discussion/comment/29923#Comment_29923Yes, so the code for second will be:
JS:
jQuery("#button2").click(function() {
jQuery("#infodiv2").toggle();
});
HTML:




mklubeck
Level 3 ●●●
Forum|alt.badge.img+8
  • Level 3 ●●●
  • September 3, 2020

Hmm. Interesting. You showed (but didn't mention) that we also have to change the div id. I missed that at first and the second button expanded the first question! So I tried the div id also and it worked. Then I was going to write you to let you know I needed to change the div id, and noticed you had in your example!
Thanks again!