On hover display content with the same ID

Question

Basically, I have a list of address and when a user hovers over an address I would like to display the opening times to that address.

this is an example of the mark-up for the address

<li data-contentid="60" class="list-group-item courier">
    <div class="c-name"> Hermes Parcelshop </div>
    <div class="address"> Virxo,Bedford Avenue,Germanton,Colorado,PE17 7NB</div>
</li>

this is the mark-up for the opening time linked to that address

<li id="open-times-60" class="list-group-item op-times" style="display: none;">
    <div class="">Mon 8am - 8pm </div>
    <div class="">Tues 9am - 8pm </div>
    <div class="">Wed 9am - 7pm </div>
    <div class="">Thurs 8am - 9pm </div>
    <div class="">Fri 7am - 7pm </div>
    <div class="">Sat 9am - 6pm </div>
    <div class="">Sun 6am - 8pm </div>
</li>

the jquery I am currently trying to work with

$("li.courier").on('Click', function(){
    var num = $(this).data('contentid');
    $('#open-times-' + num).toggleClass();
});

Any help or tips would be great.

Thanks for your time in advance.

http://jsfiddle.net/Zy2Ny/227/

You arent toggling a class. Add one to hide or show the content. Or use `showToggle()` insteas — GreyRoofPigeon, Nov 17 '18 at 14:22
Possible duplicate of [Is it possible to use jQuery .on and hover?](https://stackoverflow.com/questions/9827095/is-it-possible-to-use-jquery-on-and-hover) — Mohammad, Nov 17 '18 at 14:22
Use `mouseenter` instead of `hover` and use `.show()` instead of `.toggleClass()` http://jsfiddle.net/Zy2Ny/234/ — Mohammad, Nov 17 '18 at 14:25
The linked example (which should be a snippet and not a link to an external resource) uses `.on("hover", ...)` and not `.on("click", ...)` as the code in this question - which doesn't fit the description/requirement... In case it is really `hover`-version then check the duplicate. — Andreas, Nov 17 '18 at 14:26

score 1 · Accepted Answer · answered Nov 17 '18 at 14:28

In toggleClass() function the class to be toggled parameter should be passed. Here I have created a class name hide which will be toggled hence hidden and shown on hover

$("li.courier").hover(function(){
    var num = $(this).data('contentid');
    $('#open-times-' + num).toggleClass('hide');
});

.hide {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li data-contentid="60" class="list-group-item courier">
  <div class="c-name"> Hermes Parcelshop </div>
  <div class="address"> Virxo,Bedford Avenue,Germanton,Colorado,PE17 7NB</div>
</li>

<li id="open-times-60" class="list-group-item op-times hide">
  <div class="">Mon 8am - 8pm </div>
  <div class="">Tues 9am - 8pm </div>
  <div class="">Wed 9am - 7pm </div>
  <div class="">Thurs 8am - 9pm </div>
  <div class="">Fri 7am - 7pm </div>
  <div class="">Sat 9am - 6pm </div>
  <div class="">Sun 6am - 8pm </div>
</li>

score 0 · Answer 2 · answered Nov 17 '18 at 15:09

.on('hover',function(){ ... }); Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions. (Ref: jQuery Docs.)

You can either use .hover() or .on('mouseenter',function(){ ... });

$("li.courier").hover(function(){ 
    var num = $(this).data('contentid');
    $('#open-times-' + num).show();  
});

or

$("li.courier").on('mouseenter',function(){ 
    var num = $(this).data('contentid');
    $('#open-times-' + num).show();  
});

On hover display content with the same ID

2 Answers2