title: Hide/Show div based on checkbox selection
body: <p>I'm building a form that's supposed to hide and show content according to checkbox selections made by the user. No luck so far in identifying where the error in my code is. Any help will be appreciated. Thanks!</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>function documentFilter(trigger, target) {
  
  $(trigger).change(function () {
      if ($(trigger).checked)
          $(target).show();
      else
          $(target).hide();
      });
  }
  
  documentFilter("triggerDiv", "hideableDiv");</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;input type="checkbox" id="triggerDiv" &gt; Some caption   &lt;/label&gt;
  
  &lt;div id="hideableDiv" class="well"&gt;
      Some hidable content &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>