Radio: Collapsible Radio Questions

This article will show you how to program radio questions so they are collapsible


Background

You may want to program radio questions so they can collapse. This is helpful when having multiple radio questions on the same page so you can save room on the screen and decrease scrolling. 

Click here to see an example


Instructions

  1. Program your first radio question
  2. Add your question text as needed
  3. Access the 'Source Code Editor' of the 'Question Text' field
    • See article: Source Code Editor
    • Add the following code below the 'Question Text' you just entered: 
       <div class="exp_holder"><img class="exp_icon fr-dii" src="https://cdn2.cmix.com/surveyContent/survey_2302/uploads/arrow-colaps.png"></div>
      		
  4. Access the 'Source Code Editor' of the 'Instructions' field
    • See article: Source Code Editor
    • Add the following code below the 'Instructions' field:
      <span class="chosenOne"> </span>
      		
  5.  Add the following code to the '</> Add Javascript' field
    jQuery('.exp_holder').each(function(){
        jQuery(this).click(function(){
            jQuery(this).parents(".cm-question-wrapper").find(jQuery('.fieldset')).slideToggle('slow')
            jQuery(this).parents(".cm-question-wrapper").find(jQuery('.exp_icon')).toggleClass("icon_expanded");
        });
    });
     
    jQuery("input[type=radio]").change(function(){
        var chosen = jQuery(this).parents(".cm-response-container").find(".cm-radio-label-text").html()
        jQuery(this).parents(".cm-question-wrapper").find(".chosenOne").html(chosen)
         jQuery(this).parents(".cm-question-wrapper").find(jQuery('.fieldset')).slideToggle('slow')
         jQuery(this).parents(".cm-question-wrapper").find(jQuery('.exp_icon')).toggleClass("icon_expanded");
    });
    	
  6. Add the following code to the '</> Add CSS' field
    .cm-survey-container {
    background: #686869;
    }
    .cm-qtext {
    border-bottom: 1px solid #60A845;
    }
    .exp_holder {
            display: inline;
        float: right;
        cursor: pointer;
     -webkit-tap-highlight-color: transparent;
     -moz-tap-highlight-color: transparent;
    }
    .icon_expanded{
        transform: rotate(180deg);
    }
    .exp_icon {
        height: 25px;
    }
    .chosenOne {
    color: #a0a0a0;
    }
    	
  7. Program your response list as needed. 
  8. If you have more radio questions to program on this same page: 
    1. The easiest way to accomplish this is to clone the first version you made. 
    2. Repeat steps 2 through 7 as needed adjusting your question text and response list. 
    3. Remove the code from the '</> View Javascript' field. 
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