Question

Let me begin by saying I realize this isn’t the best idea from an accessibility standpoint, but the functionality is not up to me to decide 🙂

I would like there to be one “content box” visible at a time (there are three total) – and which box is currently displayed will be decided by which corresponding link is being hovered over (and box-one will display on page load before any hover actions).

If we imagine I have the following HTML:

<ul>
    <li id="link-one">Link One</li>
    <li id="link-two">Link Two</li>
    <li id="link-three">Link Three</li>
</ul>

<div id="box-one">Content for box one.</div>
<div id="box-two">Content for box two.</div>
<div id="box-three">Content for box three.</div>

I would like #box-one to display by default. Then if the #link-two or #link-three are hovered over, then #box-two or #box-three would display accordingly.

It would be excellent if there was a fade animation during the transfer.

This is line of thinking I’m approaching this with – I realize this isn’t valid jQuery syntax, but if anyone can help me turn this into something real I would greatly appreciate it!

if ($(#link-one).mouseenter(function() {
    $(#box-one).show();
    $(#box-two).hide();
    $(#box-three).hide();
});)

if ($(#link-two).mouseenter(function() {
    $(#box-two).show();
    $(#box-one).hide();
    $(#box-three).hide();
});)

if ($(#link-three).mouseenter(function() {
    $(#box-three).show();
    $(#box-one).hide();
    $(#box-two).hide();
});)

Self critique: my code doesn’t scale well with the addition of a new link/box combo. It seems very inefficient, but I’m not sure how else to achieve this. There is probably a better way to achieve a fade in/out transfer when a new box is to be shown. Any ideas are greatly appreciated.

Thanks!

Answer 1

put the div id or class in the anchor

<a href="#" rel="divName">...</a>

bind click handler or hover or mouseenter (whatever you please) to the anchor, add a class if you want and just grab that divName to display it. Hide everything and display that one. You can do the same thing with li

Something like

$('.className').bind('mouseenter', function() {
    //grab the rel attribute
    var divName = $(this).attr('rel');
    // hide all boxes

    // show the right box
    $('#' + divName).show();
});

for hiding I would group your boxes in a div so you can target it better