title: jquery click() loads blank page
body: <p>I'm trying to use a button to toggle visibility of two divs.</p>
  
  <p>See "Shop by Occasion" and "Shop by Recipient" <a href="http://198.57.247.171/~bigmouthinc/products/" rel="nofollow">here</a> </p>
  
  <p>Site is Wordpress with _strap (underscores + bootstrap)</p>
  
  <p>Buttons:</p>
  
  <pre><code>&lt;div&gt;&lt;button data-toggle="#form_occ"&gt;Shop by Occasion&lt;/button&gt; or &lt;button data-toggle="#form_per"&gt;Shop by Recipient&lt;/button&gt;&lt;/div&gt;
  </code></pre>
  
  <p>jQuery (WP)</p>
  
  <pre><code> jQuery("button[data-toggle]").click(function() {
    var selector = jQuery(this).data("toggle");  // get corresponding element
    jQuery("div").hide();
    jQuery(selector).show();
  });
  </code></pre>
  
  <p>I thought maybe the  element in bootstrap was an issue, but the same blank page happens using  or  as the click() element.</p>
  
  <p><a href="http://jsfiddle.net/A8Ymj/" rel="nofollow">This</a> is the fiddle I'm emulating</p>
  
  <p>THE FIX:</p>
  
  <p>I used the same markup and code, but instead of hiding ALL div's (duh!), I added a class to isolate only the two div's I want to show/hide.</p>
  
  <pre><code>&lt;div id="form_occ" class="form"&gt;&lt;!--occasion form--&gt;
  &lt;div id="form_occ" class="form"&gt;&lt;!--occasion form--&gt;
  
  jQuery("button[data-toggle]").click(function() {
    var selector = jQuery(this).data("toggle");  // get corresponding element
    jQuery("div.form").hide();
    jQuery(selector).show();
  });
  </code></pre>
  
  <p>If anyone finds value in this answer, how about voting up my question!</p>