CODEWITHSUNDEEP
javascriptjquery
user3653679
user3653679

Reputation: 1

FadeOut all id's with the same name

This is my HTML:

                <div class="content-box" id="enabled_add"> 
                <h2 class="title">hallo</h2>
                <div class="content-box-heading-orange"></div> 
                <div class="content-box-content">
                Hallo
                </div> 
            </div>              
            <div class="content-box" id="enabled_add"> 
                <h2 class="title">hallo2</h2>
                <div class="content-box-heading-orange"></div> 
                <div class="content-box-content">
                Hallo2
                </div> 
            </div>

This is my JS

$('#usernav_close').click(function(){
            setTimeout(function(){
                $('#enabled_add').fadeOut('slow');
            });
        });

I want to get all of the content-boxes with the id enabled_add to FadeOut. But my problem is that only the first element is selected.

Upvotes: 0

Views: 58

Answers (2)

Tommy Ivarsson
Tommy Ivarsson

Reputation: 605

The id attribute is supposed to be unique to an element on a page. You aren't supposed to use the same id twice in one document.

The difference between ids and classes

You can however give an element more than one class.

<div class="content-box enabled_add">

That would mean your selector would read

$('.enabled_add')

Upvotes: 2

Paul Roub
Paul Roub

Reputation: 36458

ids must be unique. If you try to reuse an id, only the first will be found/updated by jQuery. You want to use a class here.

<div class="content-box enabled_add"> 
  <h2 class="title">hallo</h2>
  <div class="content-box-heading-orange"></div> 
  <div class="content-box-content">
    Hallo
  </div> 
</div>              
<div class="content-box enabled_add"> 
  <h2 class="title">hallo2</h2>
  <div class="content-box-heading-orange"></div> 
  <div class="content-box-content">
    Hallo2
  </div> 
</div>

$('#usernav_close').click(function(){
  setTimeout(function(){
    $('.enabled_add').fadeOut('slow');
  });
});

Upvotes: 2

Related Questions