CodePen

HTML

            
              <select id="riverdale">
  <option value="">- Select -</option>
	<option value="opt1">Archie</option>
	<option value="opt2">Jughead</option>
	<option value="opt3">Betty</option>
	<option value="opt4">Veronica</option>
</select>

<div class="stuff">
  <div class="opt1">stuff about archie</div>
  <div class="opt2">stuff about jughead</div>
  <div class="opt3">stuff about betty</div>
  <div class="opt4">stuff about veronica</div>
  <div class="opt1">more stuff about archie</div>
  <div class="opt1">even more stuff about archie</div>
  <div class="opt4">more stuff about veronica</div>
  <div class="opt3">more stuff about betty</div>
  <div class="opt1">even way more stuff about archie</div>
  <div class="opt2">more stuff about jughead</div>
</div>
            
          
!

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // hide the options on load
$('.stuff div').hide();

// handle the select change
$('#riverdale').change(function(){
  
  var optValue = $(this).val();
  if (optValue == '') { return; }
  
  // hide everything
  $('.stuff div').hide();
  
  // show what was selected
  var selector = '.' + optValue;
  $(selector).show();
  
})
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................