CODEWITHSUNDEEP
javascriptjqueryhtml
Beno
Beno

Reputation: 576

How to hide all div except the first?

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 :

<div class="col-md-6 ref">
    {% for benefit in benefits %}

    <div class="col-md-6 ref_display">
        <h3>{{ benefit.name }}</h3>
        <p>{{ benefit.description }}</p>
        <div></div>
    </div>

    {% endfor %}
</div>

And when I use my JS code, it doesn't work :

$(function() {
    var ref = $('div.ref_display');
    ref.gt(0).hide();
});

I think JQuery considers that there is only one div when I write .gt(0) however, I have many of them displayed on my page..

I'm beginner in JS so there is probably a solution that I don't know :)

Thank you in advance !!

Upvotes: 3

Views: 2325

Answers (7)

Aneesh R S
Aneesh R S

Reputation: 3827

You can solve it by simply using CSS. :not(:first-child) will select all the child elements except the first one

div:not(:first-child) { display: none;}
<div class="col-md-6 ref_display">1</div>
<div class="col-md-6 ref_display">2</div>
<div class="col-md-6 ref_display">3</div>

Upvotes: 1

dfsq
dfsq

Reputation: 193271

Seems like you don't JS for this at all. Simple CSS should be sufficient .ref_display + .ref_display:

I want to hide all div except the first

But jQuery will work too of course:

$('.ref_display + .ref_display').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 ref_display">#1</div>
<div class="col-md-6 ref_display">#2</div>
<div class="col-md-6 ref_display">#3</div>

Upvotes: 0

Mamun
Mamun

Reputation: 68943

Try var ref = $('div.ref_display:gt(0)').hide();

$(function() {
    $('div.ref_display:gt(0)').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 ref">
        
  <div class="col-md-6 ref_display">
    First Div
  </div>
  <div class="col-md-6 ref_display">
    Second Div
  </div>
  <div class="col-md-6 ref_display">
    Third Div
  </div>

</div>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337600

The issue is that gt(0) is not a function. Presumably you meant get(0) but even that has issues as it will return a DOM Element which doesn't have a hide() method.

To achieve what you need, you can use the :gt selector to get all divs but the first and hide them:

$('div.ref_display:gt(0)').hide();

That being said you don't need JS/jQuery for this at all as it can be achieved in CSS alone:

div.ref { display: none; }
div.ref:first-child { display: block; }
<div class="col-md-6 ref">1</div>
<div class="col-md-6 ref">2</div>
<div class="col-md-6 ref">3</div>

Upvotes: 3

brk
brk

Reputation: 50316

Using only css pseudo selector not & first-child 

.ref .ref_display:not(:first-child) {
   display:none;
}
<div class="col-md-6 ref">
  <div class="col-md-6 ref_display">
    <h3>1</h3>
    <p>1</p>
    <div>X</div>
  </div>
  <div class="col-md-6 ref_display">
    <h3>2</h3>
    <p>2</p>
    <div>Y</div>
  </div>
  <div class="col-md-6 ref_display">
    <h3>3</h3>
    <p>3</p>
    <div>Z</div>
  </div>

</div>

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You can use not() as 

var ref = $('div.ref_display').not(':first').hide();

This will ignore the first element with div having class ref_display.

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68393

I want to hide all div except the first

Use :not(:first-child)

$('div.ref_display:not(:first-child)').hide();

Or use slice

$("'div.ref_display").slice(1).hide();

Upvotes: 1

Related Questions