Question

I have a list with items. Based on what item I’m hovering over, I want to show only the one div with associated content and hide all the rest.
The list has about 22 items, so there is 22 different div’s I need to switch between (show/hide).

Is there some quick solution to accomplish this with jQuery?

This is how I have set it up at the moment as a sarting point:

<div id="list-of-items">
    <ul>
        <li id="item1">item1</li>
        <li id="item2">item2</li>
        <li id="item3">item3</li>
        <li id="item...">19-more-items</li>
    </ul>
</div>

<div id="content1">content1</div>
<div id="content2">content2</div>
<div id="content3">content3</div>
<div id="content...">...</div>

Answer 1

$('#list-of-items li').on('mouseenter mouseleave', function(e) {
    $('#content'+this.id.replace('item', ''))[e.type==='mouseenter'?'show':'hide']();
})​;​

FIDDLE

EDIT

I think this is what you are looking for:

$(function(){
    $('#list-items li').on('mouseenter', function() {
        $('#content'+this.id.replace('item', '')).show().siblings().hide();
    });
});

FIDDLE