Link Hover/Click

Show content on hover or click where click is permanent and hover is temporary

by infiniteloops

HTML

<div id="ref_menu">
    <a href="javascript://" class="ref_link" rel="link1">
        Link 1
    </a>
    <a href="javascript://" class="ref_link" rel="link2">
        Link 2
    </a>
</div>
<div id="ref_content">
    <div class="ref_text" id="link1">
        text1
    </div>
    <div class="ref_text" id="link2">
        text2
    </div>
</div>

CSS

#ref_menu { width:250px; text-align:right; position:absolute; left:0; }
#ref_menu a { display:block; padding-right:10px; font-family:trebuchet ms; position:relative; font-style:italic; color:#0097c4; font-size:11pt; line-height:30px; letter-spacing:1px; border-bottom:1px solid #0097c4; }
#ref_menu a:hover { color:red; border-bottom:1px solid red; }
#ref_content { position:absolute; left:270px; }
#ref_content div { display:none; position:relative; top:0; }

JavaScript

// store content that should stay visible
var permContent = [];

// wire up hover
$('A').hover(showLink, hideLink);

//wire up click
$('A').click(toggleLink);

function showLink(e) {
    var relLink = $(this).attr('rel');
    var contentDiv = $('#' + relLink);
    // if we have stored the content obj no need to show
    if (permContent.indexOf(relLink) < 0) {
        contentDiv.show();
    }
}

function hideLink() {
    var relLink = $(this).attr('rel');
    var contentDiv = $('#' + relLink);

    if (permContent.indexOf(relLink) < 0) {
        contentDiv.hide();
    }
}

function toggleLink() {
    var relLink = $(this).attr('rel');
    var contentDiv = $('#' + relLink);

    var permIx = permContent.indexOf(relLink);
    // index < 0 == not found, add and show
    if (permIx < 0) {
        // add link to array
        permContent.push(relLink);
        contentDiv.show();
    }
    else {
        // remove 1 item at index
        permContent.splice(permIx, 1);
        contentDiv.hide();
    }
    // stop default behavior
    return false;
}