Option tag: how to show multiple classes
<p>I have a simple dropdown that shows and hides a div depending on what is selected. </p>

<p>I would like each selection to reveal two divs (".buzzard" and ".pattern1") but I can't figure out how to tag them both. </p>

<p>Please see <a href="https://jsfiddle.net/L0zpg6d0/3/" rel="nofollow">Fiddle</a> </p>

<pre><code>&lt;div class="dropdown"&gt;
  &lt;select id="opts" data-target=".my-info-1"&gt;
    &lt;option value="buzzard" data-show=".buzzard"&gt;Buzzard&lt;/option&gt;
    ...
  &lt;/select&gt;
&lt;/div&gt;

&lt;div class="my-info-1"&gt;
  &lt;div class="buzzard hide"&gt;The buzzard is by far the most common of all our birds of prey, and its expansion has been dramatic&lt;/div&gt;
  ...
  &lt;div class="pattern1 hide"&gt;&lt;h4&gt;Distribution&lt;/h4&gt;&lt;img src="#"&gt;&lt;/div&gt;
  ...
&lt;/div&gt;

&lt;script&gt;
$('select#opts').change(function() {
  var target = $(this).data('target');
  $(target).children().addClass('hide');
  var show = $("option:selected", this).data('show');
  $(show).removeClass('hide');
});
&lt;/script&gt;


.hide {
  display: none;
}
</code></pre>

<p>I have tried</p>

<pre><code>&lt;option value="buzzard" data-show=".buzzard .pattern"&gt;Buzzard&lt;/option&gt;
</code></pre>