How to hide-show multiple divs using jQuery?

Issue

Alright, so I want to show two divs when selecting on of the options in my selector.

This is what I have currently, works great and hiding and showing elements based on option selected. But doesnt work If i want 2 divs to show on based on sections. Help would be much appreciated.

$(function() {
  $('#colorselector').change(function() {
    $('.colors').hide();
    $('#' + $(this).val()).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="colorselector">
  <option value="red">Red</option>
  <option value="yellow">Yellow</option>
  <option value="blue">Blue</option>
</Select>
<div id="red" class="colors" style="display:none"> red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>

Solution

Not sure what 2 div's you want to show, but hes an example. I've switch out id for a command class by color:

$(function() {
  $('#colorselector').change(function() {
    $('.colors').hide();
    $('.colors.' + $(this).val()).show();
  });
});

Demo

$(function() {
  $('#colorselector').change(function() {
    $('.colors').hide();
    $('.colors.' + $(this).val()).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="colorselector">
  <option value="red">Red</option>
  <option value="yellow">Yellow</option>
  <option value="blue">Blue</option>
</Select>
<div class="colors red" style="display:none"> red... </div>
<div class="colors yellow" style="display:none"> yellow.. </div>
<div class="colors blue" style="display:none"> blue..1 </div>

<div class="colors blue" style="display:none"> blue..2 </div>

Answered By - Carsten Løvbo Andersen