"See more" button | XM Community
Skip to main content
Solved

"See more" button

  • September 27, 2023
  • 4 replies
  • 403 views
V
Forum|alt.badge.img+1

How can I include a "see more" button in my question, where the respondent can click on the button and display more details about the question?

Best answer by Nam Nguyen

@Vsolbiati Add this html to your question source

<style type="text/css">#hidden-paragraph {
            display: none;
        }
</style>
<p>The short part of the question <span id="hidden-paragraph">The hidden part that will be revealed when you click see more button....................ble bla bla</span></p>
<button id="see-more-button">See more...</button>

Add this to Javascript to activate the button

Qualtrics.SurveyEngine.addOnReady(function() {
document.getElementById("see-more-button").addEventListener("click", function() {
            var hiddenParagraph = document.getElementById("hidden-paragraph");
            if (hiddenParagraph.style.display === "none") {
                hiddenParagraph.style.display = "inline";
                this.textContent = "See less...";
            } else {
                hiddenParagraph.style.display = "none";
                this.textContent = "See more...";
            }
        });
});

Hope this helps

C
S

4 replies

A
Level 5 ●●●●●
Forum|alt.badge.img+14
  • ash123
  • Level 5 ●●●●●
  • September 27, 2023

There’s instructions here for that: 

 

V
Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+29
  • Nam Nguyen
  • QPN Level 8 ●●●●●●●●
  • Answer
  • September 27, 2023

@Vsolbiati Add this html to your question source

<style type="text/css">#hidden-paragraph {
            display: none;
        }
</style>
<p>The short part of the question <span id="hidden-paragraph">The hidden part that will be revealed when you click see more button....................ble bla bla</span></p>
<button id="see-more-button">See more...</button>

Add this to Javascript to activate the button

Qualtrics.SurveyEngine.addOnReady(function() {
document.getElementById("see-more-button").addEventListener("click", function() {
            var hiddenParagraph = document.getElementById("hidden-paragraph");
            if (hiddenParagraph.style.display === "none") {
                hiddenParagraph.style.display = "inline";
                this.textContent = "See less...";
            } else {
                hiddenParagraph.style.display = "none";
                this.textContent = "See more...";
            }
        });
});

Hope this helps

Nam Nguyen - XM Technology Consultant | DXCON Vietnam
S
V
Forum|alt.badge.img+1
  • Vsolbiati
  • Author
  • September 27, 2023

@Vsolbiati Add this html to your question source

<style type="text/css">#hidden-paragraph {
            display: none;
        }
</style>
<p>The short part of the question <span id="hidden-paragraph">The hidden part that will be revealed when you click see more button....................ble bla bla</span></p>
<button id="see-more-button">See more...</button>

Add this to Javascript to activate the button

Qualtrics.SurveyEngine.addOnReady(function() {
document.getElementById("see-more-button").addEventListener("click", function() {
            var hiddenParagraph = document.getElementById("hidden-paragraph");
            if (hiddenParagraph.style.display === "none") {
                hiddenParagraph.style.display = "inline";
                this.textContent = "See less...";
            } else {
                hiddenParagraph.style.display = "none";
                this.textContent = "See more...";
            }
        });
});

Hope this helps

Many thanks!! Can I use this code for more than one question or do I need to change it?

Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+29
  • Nam Nguyen
  • QPN Level 8 ●●●●●●●●
  • September 28, 2023

@Vsolbiati Add this html to your question source

<style type="text/css">#hidden-paragraph {
            display: none;
        }
</style>
<p>The short part of the question <span id="hidden-paragraph">The hidden part that will be revealed when you click see more button....................ble bla bla</span></p>
<button id="see-more-button">See more...</button>

Add this to Javascript to activate the button

Qualtrics.SurveyEngine.addOnReady(function() {
document.getElementById("see-more-button").addEventListener("click", function() {
            var hiddenParagraph = document.getElementById("hidden-paragraph");
            if (hiddenParagraph.style.display === "none") {
                hiddenParagraph.style.display = "inline";
                this.textContent = "See less...";
            } else {
                hiddenParagraph.style.display = "none";
                this.textContent = "See more...";
            }
        });
});

Hope this helps

Many thanks!! Can I use this code for more than one question or do I need to change it?

If you showing muliple question on the same page, just throw down number behind the variable and id. Like hidden-paragraph1, hidden-paragraph2, see-more-button 1 to distinguish them.

Nam Nguyen - XM Technology Consultant | DXCON Vietnam
Terms & ConditionsAccessibility statement