jQuery show/hide based on select (survey mode)

Redirect the visitor to question/answer (divs) based on option selected, based on the tweet https://twitter.com/printsome/status/689130904040554498 pin

by Pedro Martin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Tshirt Printing guide made easy.</h2>
We can suggest you a printing method based on the options you choose below:

<div id="question1" class="colors" style="display:block"> 
<h3>It is a logo with solid colours, numbers or letters perhaps?</h3>
<select class="button dropdown" id="select1">
   <option value="--">Please Select</option>
   <option value="question2">Yes</option>
   <option value="question3">No</option>
</select>
</div>
<div id="question2" class="colors" style="display:none"> 
<h3>Do you need more or less than 25 units?</h3>
<select class="button dropdown" id="select2">
   <option value="--">Please Select</option>
   <option value="question4">Less</option>
   <option value="question12">More</option>
</select>
</div>
<div id="question3" class="colors" style="display:none"> 
<h3>Is your design an illustration or a drawing?</h3>
<select class="button dropdown" id="select3">
   <option value="--">Please Select</option>
   <option value="question6">Yes</option>
   <option value="question5">No</option>
</select>
</div>
<div id="question4" class="colors" style="display:none"> 
<h3>Is the size of the design bigger than 10x10cms?</h3>
<select class="button dropdown" id="select4">
   <option value="--">Please Select</option>
   <option value="question8">Yes</option>
   <option value="question9">No</option>
</select>
</div>
<div id="question5" class="colors" style="display:none"> 
<h3>Are you trying to print a photograph?</h3>
<select class="button dropdown" id="select5">
   <option value="--">Please Select</option>
   <option value="question7">Yes</option>
   <option value="question11">No</option>
</select>
</div>
<div id="question6" class="colors" style="display:none"> 
<h3>Does it have solid colours?</h3>
<select class="button dropdown" id="select6">
   <option value="--">Please Select</option>
   <option value="question2">Yes</option>
   <option...

CSS

/* Some basic page styles */
body {
  font: 100%/1.5 AvenirNext-Regular, Corbel, "Lucida Grande", "Trebuchet Ms", sans-serif;
  color: #111; 
  background-color: #fff;
  margin: 2em 10%
}
h1,h2,h3 { color:#000}
/* Label styles: style as needed */
label {
  display:block;
  margin: 2em 1em .25em .75em;
  font-size: 1.25em;
  color:#333;
}

/* Container used for styling the custom select, the buttom class adds the bg gradient, corners, etc. */
.dropdown {
  position: relative;
  display:block;
  margin-top:0.5em;
  padding:0px;
}

/* This is the native select, we're making everything the text invisible so we can see the button styles in the wrapper */
.dropdown select {
  width:100%;
  margin:0;
  background:none;
  border: 1px solid transparent;
  outline: none;
  /* Prefixed box-sizing rules necessary for older browsers */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* Remove select styling */
  appearance: none;
  -webkit-appearance: none;
  /* Magic font size number to prevent iOS text zoom */
  font-size:1.25em;
  /* General select styles: change as needed */
  /* font-weight: bold; */
  color: #444;
  padding: .6em 1.9em .5em .8em;
  line-height:1.3;
}
.dropdown select,
label {
  font-family: AvenirNextCondensed-DemiBold, Corbel, "Lucida Grande","Trebuchet Ms", sans-serif;
}

/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */

.dropdown::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 8px;
  top: 50%;
  right: 1em;
  margin-top:-4px;
  z-index: 2;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpolygon fill='rgb(102,102,102)' points='8,12 0,0 16,0'/%3E%3C/svg%3E") 0 0 no-repeat;  
  /* These hacks make the select behind the arrow clickable in some browsers */
  pointer-events:none;
}

/* This hides native dropdown button...

JavaScript

$(function() {
        $('#select1').change(function(){
            $('#' + $(this).val()).show();
			$("option:selected").removeAttr("selected");
			$('#question1').hide();
        });
		 $('#select2').change(function(){
            $('#' + $(this).val()).show();
			$("option:selected").removeAttr("selected");
            $('#question2').hide();
        });
		 $('#select3').change(function(){
            $('#' + $(this).val()).show();
			$("option:selected").removeAttr("selected");
            $('#question3').hide();
        });
		 $('#select4').change(function(){
            $('#' + $(this).val()).show();
			$("option:selected").removeAttr("selected");
            $('#question4').hide();
        });
		 $('#select5').change(function(){
            $('#' + $(this).val()).show();
			$("option:selected").removeAttr("selected");
            $('#question5').hide();
        });
		 $('#select6').change(function(){
            $('#' + $(this).val()).show();
			$("option:selected").removeAttr("selected");
            $('#question6').hide();
        });
		 $('#select7').change(function(){
            $('#' + $(this).val()).show();
			$("option:selected").removeAttr("selected");
             $('#question7').hide();
       });
	    $('#select11').change(function(){
            $('#' + $(this).val()).show();
			$("option:selected").removeAttr("selected");
             $('#question11').hide();
       });
	    
    });
	function showDiv() {
   document.getElementById('question1').style.display = "block";
   $('#question2').hide();
   $('#question3').hide();
   $('#question4').hide();
   $('#question5').hide();
   $('#question6').hide();
   $('#question7').hide();
   $('#question8').hide();
   $('#question9').hide();
   $('#question10').hide();
   $('#question11').hide();
   $('#question12').hide();
   $('#question13').hide();
}