JQuery passing element id for toggle event

Question

I'm trying to pass div attribute data as an element id. I have a group of divs paired up, the first one as a sort of header, identifying what in the second, non-visible div. I'm trying to toggle the second div visible via the mouseenter event of the first. I'm trying to do it with one function for the whole group rather than a for each pair.

My code follows:

$(document).ready(function () {
    $('div.jobs').mouseenter(function () { 
        var id = (this).attr("data-item");
        $($("#"+ id).toggle());
    });
});

HTML as follows:

<div class="jobs" id="ident" data-item="data"> test div</div>
<br />
<div class="jobs" id="data" style="display:none">Some Data</div>
<br />
<div class="jobs" id="ident1" data-item="data1"> test div 2</div>
<br />
<div class="jobs" id="data1" style="display:none">Some Other Data</div>
<br />

Seems like it should work. I'm getting the id of the div I want to toggle from the data-item of the preceding div when I trigger the mouse enter event but it won't toggle. I must be missing something.

Answer 1

Have a look at this fiddle:

http://jsfiddle.net/z26ogdzq/

I did some slight modifications to your original the JS.

$(document).ready(function () {
    $('div.jobs').mouseenter(function () {
        var id = $(this).attr("data-item");
        $("#" + id).toggle();
    });
});