title: How to hide all div except the first?
body: <p>I'm using JQuery and I want to hide all div except the first but the problem is that I display my div (ref_display) by a for loop like that :</p>
  
  <pre><code>&lt;div class="col-md-6 ref"&gt;
      {% for benefit in benefits %}
  
      &lt;div class="col-md-6 ref_display"&gt;
          &lt;h3&gt;{{ benefit.name }}&lt;/h3&gt;
          &lt;p&gt;{{ benefit.description }}&lt;/p&gt;
          &lt;div&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      {% endfor %}
  &lt;/div&gt;
  </code></pre>
  
  <p>And when I use my JS code, it doesn't work :</p>
  
  <pre><code>$(function() {
      var ref = $('div.ref_display');
      ref.gt(0).hide();
  });
  </code></pre>
  
  <p>I think JQuery considers that there is only one div when I write <code>.gt(0)</code> however, I have many of them displayed on my page.. </p>
  
  <p>I'm beginner in JS so there is probably a solution that I don't know :)</p>
  
  <p>Thank you in advance !!</p>