title: Toggle DIV on drop down selection
body: <p>I have a SELECT dropdown and when you cycle through the OPTIONS the corresponding DIV's get shown/hidden.</p>
  
  <p>The part I'm having an issue with is, that I want the code to apply to the next items on the page and not globally to the entire page.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('#toggle-divs').on('change', function() {
      $(this).next(".div1").toggle(this.value == 2)
   $(this).next(".div2").toggle(this.value == 3)
   $(this).next(".div3").toggle(this.value == 4)
    });
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="aside"&gt;
    &lt;select id="toggle-divs"&gt;
      &lt;option selected="selected" value="1"&gt;Select item...&lt;/option&gt;
      &lt;option value="2"&gt;Item 1&lt;/option&gt;
      &lt;option value="3"&gt;Item 2&lt;/option&gt;
      &lt;option value="4"&gt;Item 3&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="aside"&gt;
    &lt;div class="div1" style="display:none;"&gt;
      DIV 1
    &lt;/div&gt;
    &lt;div class="div2" style="display:none;"&gt;
      DIV 2
    &lt;/div&gt;
    &lt;div class="div3" style="display:none;"&gt;
      DIV 3
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>