Click to Expand

This article will show you how to insert "Click to Expand" functionality 


Background

In some instances you may want to be able to have a hyperlink within your question text so a respondent can see a condensed link that can be clicked on to show more detail, such as a list of definitions or a full concept description. 


Adding in Click to Expand

  1. Open up your question card 
  2. Access the Source Code Editor
  3. Add the code below into the 'Source Code Editor' for the field you want to have your link appear. 
    1. If you have more than one link make sure to increment the div id for each one. This is what makes each link unique. In the example below we have "button1" and "display1". 
    2. Update the "Link will appear here." text with the default text you wish to appear.
    3. Update the code below with the content you wish to have appear upon clicking the link. The current placeholder in the code below reads "DISPLAY_CONTENT". This can be text and/or images as needed.
      <div id="button1" style="color:blue;">Link will appear here.</div>
      <div id="display1" style="display:none;">DISPLAY_CONTENT</div>
      		
  4. Close out of the 'Source Code Editor' and click 'Save'
  5. Add the following code to the JavaScript field within your question
    • See article: Adding JavaScript and/or CSS to a Question
    • Make sure to reference the same ids you used in the steps above as each set will have to be unique in order for you to use more than one on a screen, if needed
      • Line 1 will have the name of the link itself
      • Line 2 will have the name of the information to be displayed
      • Line 2 also has the animation effects. Simply change the "drop" to any of the available options
      • Line 3 will have text you can modify when you click on the link
        jQuery( "#button1" ).click(function() {
          jQuery( "#display1" ).toggle( "drop", 500 );
          jQuery(this).text( jQuery(this).text() == 'Click here to hide' ? 'Click here to show' : 'Click here to hide' );
        });
        			
  6. Click 'Save' when you are done.
  7. Make sure to test as needed 

  • Note
    • You can use this with code within question text or instructional text
    • You can add static text above or below the code. The example above has the static question text above the code
    • You can also use the code by itself in a static element as well.  

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us