Simple Grid - Horizontal Numeric: Progressive Reveal

This article will help you setup a Simple Grid (Horizontal Numeric) with a Progressive Reveal


Simple Grid - Horizontal Numeric: Progressive Reveal

This code will allow you to style a 'Simple Grid - Horizontal Numeric' question to show and answer one grid row attribute at a time. 

Click here to see an example


Instructions

  1. Add a 'Simple Grid - Horizontal Numeric' question type to your survey with all of the appropriate responses
    1. See article: Add a Question: Grid
  2. Add the code below to your 'ADD JAVASCRIPT'. 
    1. See article: Adding JavaScript and/or CSS to a Question
      jQuery(".cm-simple-grid__table tr").each(function () {
      	jQuery(this).find("input[type='number']").keyup(function() {
      		jQuery(this).parents("tr").next().show();
      	})
      })
      		
  3. Add the code below to your 'ADD CSS'. 
    1. See article: Adding JavaScript and/or CSS to a Question
      /* SIMPLE GRID - PROGRESSIVE REVEAL */ 
      .cm-simple-grid__table tr:not(:first-child) {
      	display: none;
      }
      		
  4. Make sure to test!
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