title: Hide a partial upon page load and then show partial on click
body: <p>Using Rails 3 and JQuery, I have a div that contains a rendered partial.  When I hide that div in my javascript using JQuery, it does not hide.  Why am I unable hide this?  I would simply like it to be hidden and then on a button click be shown.</p>
  
  <p>My view</p>
  
  <pre><code>new.html.erb
    &lt;div class="row carousel-div"&gt;
  
      &lt;%= render "carousel", f: f %&gt;
  
    &lt;/div
  </code></pre>
  
  <p>My javascript</p>
  
  <pre><code>carousel.js
      $(document).ready(function() {
        $(".carousel-div").hide();
      });
  </code></pre>
  
  <p>I am not very comfortable with AJAX but that is the only answer I have found online.  Is there no way to do this without AJAX?  If AJAX is the only way, then out of curiosity why is the JQuery hide function made inactive and, of course, how would I institute the AJAX call?  </p>
  
  <p>Any guidance is much appreciated!</p>