JQuery for multiple div id's that are the same

Question

I have multiple divs with id='title'.

When that div is hovered over I want a hidden div with id="source" to appear.

I am using the following code but only the first div with id='title' on the page works.

    <!-- Show Source / Date on mouse hover -->
    <script>
    $(document).ready(function(){
        $("#title").mouseenter(function(){
            $("#source").fadeIn( 200 );
        });

        $("#title").mouseleave(function(){
            $("#source").fadeOut( 200 );
        });
    });
    </script>

HTML Example:

<div id="title" class="col-md-3">
     <div id="source" style="display:none">Hidden Text</div>
</div>
<div id="title" class="col-md-3">
     <div id="source" style="display:none">Hidden Text</div>
</div>
<div id="title" class="col-md-3">
     <div id="source" style="display:none">Hidden Text</div>
</div>

*I have multiple divs with id='title'* ? please learn about IDs https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id - ID (as the name suggests) **must be unique**. — Roko C. Buljan, Aug 17 '21 at 17:42
Also, avoid at all costs using inline `on*` or `style` attributes. When needed, use a **utility atom class** in your stylesheet like: `.u-none { display: none; }` and assign that class to the desired element. — Roko C. Buljan, Aug 17 '21 at 17:45
Also, not sure if that's an assignment or what, but you don't need to use JavaScript to do something CSS `:hover` is meant for. — Roko C. Buljan, Aug 17 '21 at 17:48
As others have already pointed out, repeating the same ID is a bad idea. If you can't or don't want to change that, try targeting the divs by their class name, e.g. `$("div.col-md-3")` or based on their parent class name. — kmoser, Aug 17 '21 at 17:48
You absolutely need to fix that duplicate IDs. Don't move further until you do that first. — Roko C. Buljan, Aug 17 '21 at 17:50
Does this answer your question? [jQuery ID selector works only for the first element](https://stackoverflow.com/questions/11114622/jquery-id-selector-works-only-for-the-first-element) — Don't Panic, Jan 31 '23 at 21:33

score 2 · Accepted Answer · answered Aug 17 '21 at 17:56

Use classes instead of IDs
use .find() to search for descendants of an element

jQuery(function($) { // DOM ready and $ alias in scope

  $(".title").on({
    mouseenter() {
      $(this).find(".source").fadeIn(200);
    },
    mouseleave() {
      $(this).find(".source").fadeOut(200);
    }
  });

});

.title {
  display: flex;
}

/* Utility classe */
.u-none {
  display: none;
}

<div class="title col-md-3">
  TITLE 1
  <div class="source u-none">Visible Text</div>
</div>
<div class="title col-md-3">
  TITLE 2
  <div class="source u-none">Hidden Text</div>
</div>
<div class="title col-md-3">
  TITLE 3
  <div class="source u-none">Hidden Text</div>
</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Thank you so much. I will use classes for now on! – Δce Aug 17 '21 at 18:10 — Δce, Aug 17 '21 at 18:10

score 0 · Answer 2 · answered Aug 17 '21 at 18:13

Hello Δce Let's start by modifying the source code to use classes for you to pick. This helps us describe the functionality and allow the ID's to serve their purpose.

we'll take your

<div class="col-md-3 show-source-on-hover">
     <div class="source" style="display:none">Hidden Text</div>
</div>
<div class="col-md-3 show-source-on-hover">
     <div class="source" style="display:none">Hidden Text</div>
</div>
<div class="col-md-3 show-source-on-hover">
     <div class="source" style="display:none">Hidden Text</div>
</div>

and we can update the jQuery code


<script>
  $(function() {
    $(".show-source-on-hover")
      .mouseenter(function() {
          $(this).find('.source').fadeIn( 200 );
       })
       .mouseleave(function() {
          $(this).find('.source').fadeOut( 200 );
       });
    });
    </script>

You can see here there's the use of this wrapped in the $() jquery object function. and the new use of .find to get get the correct source class.

For a working demo please see the following link: https://codepen.io/jessycormier/pen/GRmaaEb

Note: your use of ID's should change and always try and be unique like others have suggested. MDN (Mozilla Developer Network) has some great documentation on the standards of HTML, CSS, and JavaScript which can help give you.

Also, in the demo I've given your column divs some default size otherwise there is nothing to trigger the mouse over events. Good luck and happy coding

JQuery for multiple div id's that are the same

2 Answers2