title: Hiding my rails div using JS
body: <p>My products view:</p>
  
  <pre><code>&lt;a href="#" id="show_metrics"&gt;Show Metrics&lt;/a&gt;
    &lt;div id="metrics" class="hidden"&gt;
  &lt;%="Number of Primary Products: #{Product.total_product_size(rating_set).count}"%&gt;&lt;br/&gt;
  &lt;%="Number of Recommendations: #{Product.total_recommendation_size(rating_set).count}"%&gt;&lt;br/&gt;
  &lt;%="Percentage of Bad Recommendations: #{bad}/#{total} = #{number_to_percentage(percentage_bad, :precision =&gt; 2)}"%&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>products.js.coffee:</p>
  
  <pre><code>$ -&gt;
    $("a#show_metrics").click (event) -&gt;
      event.preventDefault()
      $("div#metrics").toggle()
  </code></pre>
  
  <p>The "Show Metrics" link shows on my view, however nothing happens when the link is clicked, however when I view my page source I see my metrics div as a hidden value. What do I need to change to show the metrics info when the "Show Metrics" link is clicked. </p>
  
  <p>Generated HTML:</p>
  
  <pre><code>&lt;div id="metrics" class="hidden"&gt;
  Number of Primary Products: 5
  &lt;br&gt;
  Number of Recommendations: 105
  &lt;br&gt;
  Percentage of Bad Recommendations: 0/0 = NaN%
  &lt;/div&gt;
  </code></pre>
  
  <p>Generated JS:</p>
  
  <pre><code>(function() {
  $(function() {
  return $("a#show_metrics").click(function(event) {
  event.preventDefault();
  return $("div#metrics").show();
  });
  });
  }).call(this); 
  </code></pre>