Adding an expand button to the descriptive text question | Experience Community
Skip to main content
JoseS
Administrator
1 year ago
Solved

Adding an expand button to the descriptive text question

  • Jul 21, 2020 4:42 PM UTC
  • 10 replies
  • 2331 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.

View original

    10 replies

    rondev
    Level 6 ●●●●●●
    Forum|alt.badge.img+22
    • rondev
    • Level 6 ●●●●●●
    • Answer
    • Jul 21, 2020 6:07 PM UTC

    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.

    Ron Dev (DM for any request. XM Technology Consultant, surveysolution.in)
      Forum|alt.badge.img
      • kaur
      • Author
      • Jul 21, 2020 6:37 PM UTC

      Perfect! That works

      mklubeck
      Level 3 ●●●
      Forum|alt.badge.img+8
      • mklubeck
      • Level 3 ●●●
      • Sep 2, 2020 6:36 PM UTC

      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
      • rondev
      • Level 6 ●●●●●●
      • Sep 2, 2020 6:39 PM UTC

      https://www.qualtrics.com/community/discussion/comment/29870#Comment_29870Button Text

      Ron Dev (DM for any request. XM Technology Consultant, surveysolution.in)
        mklubeck
        Level 3 ●●●
        Forum|alt.badge.img+8
        • mklubeck
        • Level 3 ●●●
        • Sep 2, 2020 7:03 PM UTC

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

        mklubeck
        Level 3 ●●●
        Forum|alt.badge.img+8
        • mklubeck
        • Level 3 ●●●
        • Sep 3, 2020 5:11 PM UTC

        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
        • rondev
        • Level 6 ●●●●●●
        • Sep 3, 2020 5:13 PM UTC

        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

        Ron Dev (DM for any request. XM Technology Consultant, surveysolution.in)
        mklubeck
        Level 3 ●●●
        Forum|alt.badge.img+8
        • mklubeck
        • Level 3 ●●●
        • Sep 3, 2020 5:33 PM UTC

        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
        • rondev
        • Level 6 ●●●●●●
        • Sep 3, 2020 5:35 PM UTC

        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:



        Ron Dev (DM for any request. XM Technology Consultant, surveysolution.in)
          mklubeck
          Level 3 ●●●
          Forum|alt.badge.img+8
          • mklubeck
          • Level 3 ●●●
          • Sep 3, 2020 5:42 PM UTC

          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!

          Terms & ConditionsAccessibility statement