Window-size-dependent content toggler for an HTML form
What you could do is define in the markup the following:


A data attribute for option to indicate it's a toggle.
A data attribute for radios to indicate it's a toggle.
A data attribute for option to indicate the content it corresponds.
A data attrubute for radios to indicate the content it corresponds.


The data attributes could be selectors or any attribute you can use to target the content.

This way, your script can pick up these elements by class, get their data attribute, and toggle their corresponding contents. This is essentially how Bootstrap allows you to define modals, accordions and such without ever writing scripts. They just look for certain selectors, pick up data, and find the target selectors.

Here's a sample of how the markup would look like:

&lt;select data-component="select-toggle"&gt;
  &lt;option value="foo" data-content="#foo"&gt;foo&lt;/option&gt;
  &lt;option value="bar" data-content="#bar"&gt;bar&lt;/option&gt;
  &lt;option value="baz" data-content="#baz"&gt;baz&lt;/option&gt;
&lt;/select&gt;

&lt;input type="radio" value="foo" data-component="radio-toggle" data-content="#foo" &gt;
&lt;input type="radio" value="bar" data-component="radio-toggle" data-content="#bar" &gt;
&lt;input type="radio" value="baz" data-component="radio-toggle" data-content="#baz" &gt;

&lt;div id="foo"&gt;foo&lt;/div&gt;
&lt;div id="bar"&gt;bar&lt;/div&gt;
&lt;div id="baz"&gt;baz&lt;/div&gt;


And the script will look like the following. My jQuery is fuzzy at best, but you get the idea:

$('[data-component="select-toggle"]').on('change', function(){
  var contentSelector = $('option:selected', this).data('content');
  $(contentSelector).show().siblings().hide();
});

$('[data-component="radio-toggle"]').on('change', function(){
  var contentSelector = $(this).data('content');
  $(contentSelector).show().siblings().hide();
});