How to include expandable/collapsible text in Qualtrics survey

Question

I've been trying to include expandable/collapsible text in my Qualtrics survey but can't seem to get it working. I've put it into the descriptive text section, and pasted it into the html view. The question itself on the survey design section seems to use the html, but when I click preview the text isn't expandable/collapsible. All of the text is there, including what should be hidden. Does anyone have any ideas how to achieve this? Below is latest, and simplest attempt at implementing this:

<div>
<details>
  <summary>What is the purpose of the research?</summary>
  To help us explore feelings of ownership.
</details>
<details>
  <summary>What does the study involve?</summary>
  You completing this survey.
</details>
</div>

Answer 1

The way we implemented this was to write general JavaScript functions that shows and hides the tooltip tags on a double click event.

If you want to change the event to a single click, you can change ondblclick to onclick in the functions.

1. Copy and paste the following functions into the following text field ('Look & Feel' > 'Advanced' > 'Header'). This lets the functions live somewhere in the div of the survey to be called when needed.

   <script>    
   //This method shows the tooltip text when the project text is clicked
   function showTooltipOnClick(){
   
   var toolTips = document.getElementsByClassName('tip');//the project text is identified by the className 'tip'
   
   //Iterate through all project text elements to add a function when the text is clicked
   for(var i = 0; i <toolTips.length; i++){
   
       var toolTip = toolTips[i];
   
       toolTip.ondblclick = function(e){//when the text is clicked call this function
   
           //Get this project's tooltip text  and make it visible
           var elemStyle = e.target.getElementsByClassName('tipText')[0].style;//the tooltip text is identified by the className 'tipText' and is a descendent of the given 'tip' element
           elemStyle.visibility = 'visible';
           elemStyle.position = 'static';
   
       }
   }//End for
   }//End showTooltipOnClick()
   
   //This method hides the tooltip text when the project text is clicked
   function hideTooltipOnClick(){
   var tipTexts = document.getElementsByClassName('tipText');
   
   for(var i = 0; i < tipTexts.length; i++){
   
       var tipText = tipTexts[i];
   
       tipText.ondblclick = function(e){
           //e.target gets the element that was clicked.
           //The .closest('span') method gets the closest span ancestor of the element which should be the whole tipText.
           //The .style.visibility = "hidden" method changes the css visibility of the span element to hidden i.e. it hides the tipText.
           var elemStyle = e.target.closest('span').style;
           elemStyle.visibility = 'hidden';
           elemStyle.position = 'absolute';
       }
   }//End for
   }//End hideTooltipOnClick()
   
   </script>
   

2. In the body of the question, click 'Add JavaScript...' and call the functions defined above

   Qualtrics.SurveyEngine.addOnload(function()
   {
     showTooltipOnClick();
     hideTooltipOnClick();
   
   });
   

3. In the question description text/choice text input field, enter source code as follow:

   <div class="tip">Text to show<span class="tipText">
   Text to uncollapse/display when double clicked</span></div>
   

4. Finally, you need to add CSS code to hide the tipText before you double click on it. Insert in ('Look & Feel' > 'Advanced' > + 'Custom CSS'). You can also change the font and style of the tipText here using css. If you wanted to default the tipText to be revealed and then collapsed when double clicked, change the visibility to 'visible' below.

   /* Tooltip container */
   .tip{
       position: relative;
       display: inline-block;
       cursor: help; /*change the cursor symbol to a question mark on mouse over*/
       color: inherit; /*inherit text color*/
       text-decoration: none; /*remove underline*/
      }
   
   /*Tooltip text*/
   .tip .tipText{
       visibility: hidden;
       font: bold 24px arial;
       color: inherit;
       display: block;
       position: static;/*so that it doesn't interfere when it's in containers. Will change this when revealing it*/
   }
   

Example survey with collapsible text.