Check out my code snippet here: http://jsfiddle.net/9cnGC/11/
<div id="callus">
<div class="def">111-1111</div>
<div class="num1">222-2222</div>
<div class="num2">333-3333</div>
<div class="num3">444-4444</div>
<div class="num4">555-5555</div>
<div class="numnames numname1">location 1</div>
<div class="numnames numname2">location 2</div>
<div class="numnames numname3">location 3</div>
<div class="numnames numname4">location 4</div>
</div>
$(function() {
$(document).ready(function() {
$('.numnames').hover(function() {
$(".def").toggle();
});
$('.num1').hide();
$('.numname1').hover(function() {
$('.num1').toggle();
return false;
});
$('.num2').hide();
$('.numname2').hover(function() {
$('.num2').toggle();
return false;
});
$('.num3').hide();
$('.numname3').hover(function() {
$('.num3').toggle();
return false;
});
$('.num4').hide();
$('.numname4').hover(function() {
$('.num4').toggle();
return false;
});
});
});
I'm seeking assistance in refining and optimizing this code for better performance. Can anyone help me with this jsfiddle?
I suspect that there might be another jQuery script conflicting with this one on the page, but I can't pinpoint the issue.
You can observe the issue with display logic on this page:
Specifically, the "Give us a call" module should only show one phone number at a time, similar to the functionality in the provided jsfiddle. It works fine on other pages except for this one. Any insights would be greatly appreciated!
Thank you in advance