Change content div when hover link

Question

For a business website I'm trying to achieve the following: - A div with testimonials from clients. - A list with logos from those clients.

When the user hovers over a logo, the correct testimonial should be displayed in the div.

I've got the following markup:

<div id="testimonial-container"><div class="testimonial">Here comes a testimonial</div>
    <div class="testimonial">Here comes another testimonial</div>
    <div class="testimonial">And another one</div>
    <ul class="testimonial-logos">
       <li><a><img src="logo-1.jpg" /></a></li>
       <li><a><img src="logo-2.jpg" /></a></li>
       <li><a><img src="logo-3.jpg" /></a></li>
    </ul>
</div>

The hover effect will be done with CSS (opacity:0, and 1), so it isn't really a slider.

To add a class to the active testimonial, I use this code:

jQuery('#testimonial-container .testimonial-logos a').hover(function(){
    jQuery('#testimonial-container .testimonial, #testimonial-container .testimonial-logos a').addClass('active');
});

Any ideas how to switch the testimonials in the div? Thanks in advance!

in the second parameter to the `hover` function u could write ur alternative code right? — Pawan, Jun 27 '12 at 12:00
how would you know which testimonials would a certain logo target? Each testimonial should have at least a unique id so you can target them exactly. — Dexter Huinda, Jun 27 '12 at 12:01
@DexterHuinda - You don't need ids _assuming_ you can rely on the logos being in the same order as the testimonials. — nnnnnn, Jun 27 '12 at 12:16

score 1 · Answer 1 · answered Jun 27 '12 at 12:01

1

I would give each of your testimonals an ID for example <div class"testimonial" id="logo-1.jpg"> then on the mouse over you logo it can find the correct testimonial and display it

answered Jun 27 '12 at 12:01

theedam

629
3
10

Ah, I was thinking about that too. So I will give them a unique ID. Thanks. But the number of logos will vary. What is the best option to find the correct testimonial? – Jason Lucas Jun 27 '12 at 12:11
Will there always be one logo per testimonial, or is it possible for two logos to point at the same testimonial – theedam Jun 27 '12 at 12:13
Also, how are these being added, are you just creating the controls you need or are you making them dynamically from a database or something? – theedam Jun 27 '12 at 12:14
No, there will only be one logo per testimonial. But sometimes there will be 5 logos and testimonials displayed, and sometimes 2 or 3, etc. The total number will vary, depending of the number of clients. – Jason Lucas Jun 27 '12 at 12:15
The logos and testimonials will be added from a database (WordPress). – Jason Lucas Jun 27 '12 at 12:16
Thats fine, so each of your logos has the mouse over event, if you want to do this more cleanly you could add a custom attribute such as data-testimonialId=1 then on mouse over get that attribute, find element by ID of what ever that attribute contains. On your testimonial divs (which I assume are all hidden) have the correct IDs and then you can show that Div in a popup or however your doing it. So when you create all the controls from your database, you need to apply the data-testimonialId attribute on the logo, and the ID on the Testimonial divs. Does that make sense? – theedam Jun 27 '12 at 12:21
just give both the logo and testimonial an unique id where they can meet and find each other, e.g. `
` and your logo like ``, then you can get the `rel` attr of the logo to target the `div`.
– Dexter Huinda Jun 27 '12 at 12:23
Thanks a lot theedam for the extended explanation. – Jason Lucas Jun 27 '12 at 12:50

nnnnnn · Accepted Answer · 2012-06-28T07:26:55.873

Assuming the testimonials are in the same order as the corresponding logos then something like this will work (place within a document ready handler or in a script block at the end of the body):

var $container = $("#testimonial-container"),
    $testimonials = $(".testimonial", $container).hide();

$(".testimonial-logos li", $container).hover(function() {
    $testimonials.eq( $(this).addClass("active").index() ).show();
}, function() {
    $testimonials.eq( $(this).removeClass("active").index() ).hide();
});

Demo: http://jsfiddle.net/YG5aV/3

This caches a jQuery object containing the testimonial divs, and immediately hides them all. Then within the hover handler, on mouse enter it shows the one corresponding to the logo being hovered and on mouse leave it hides it again.

UPDATE: If the intention is to do something only on mouse enter rather than mouse enter and leave then I'd suggest .mouseenter() rather than .hover() because the latter is a shortcut for assigning both an enter handler and a leave hander. The following does what you describe in the comment - note the .eq(0).mouseenter() on the end, which triggers the mouseenter for the first li element so that it will be the active one to start with.

var $container = $("#testimonial-container"),
    $testimonials = $(".testimonial", $container).hide(),
    $prev;

$(".testimonial-logos li", $container).mouseenter(function() {
    if ($prev)
       $testimonials.eq( $prev.removeClass("active").index() ).hide();
    $testimonials.eq( ($prev = $(this).addClass("active")).index() ).show();
}).eq(0).mouseenter();

Demo: http://jsfiddle.net/YG5aV/4/

The code works perfect. Thanks! Is it possible to keep one testimonial displayed by default? And keep the current testimonial displayed, even when the user doesn't hover? — Jason Lucas, Jun 27 '12 at 12:57
`$testimonials.eq( ($prev = $(this).addClass("active")).index() ).show().addClass("active");` (Just chain an `.addClass("active")` call after the existing `.show()`. Do the same thing to chain a `.removeClass("active")` call after the existing `.hide()`.) — nnnnnn, Jul 03 '12 at 21:31

score 1 · Answer 3 · answered Jun 27 '12 at 12:11

You can use the .index() and .eq() selectors to determine which link you hovered.

$('#testimonial-container .testimonial-logos a').hover(function(){
    var index = $('#testimonial-container .testimonial-logos a').index(this);
    $('#testimonial-container .testimonial, #testimonial-container .testimonial-logos a').removeClass('active');
    $('#testimonial-container .testimonial, #testimonial-container .testimonial-logos a').eq(index).addClass('active');
});

jsfiddle link: http://jsfiddle.net/8EgB4/

score 0 · Answer 4 · edited May 23 '17 at 11:48

0

You could get the ordinal of the hovered child using index and then access the related testimonial using the nth-child selector. The nth-child selector uses an ordinal, so you'd need to add 1 to the index value to get the correct testimonial. You would also need to make sure that you list your logos and testimonials in the same order.

edited May 23 '17 at 11:48

Community

1
1

answered Jun 27 '12 at 12:11

Mark M

976
5
14

Change content div when hover link

4 Answers4