Here is the code snippet: http://jsfiddle.net/cmac2712/dnLgD/
$(document).ready(function () {
var setVisibility = function(n){
$('#content1').css('visibility', 'hidden');
$('#content2').css('visibility', 'hidden');
$('#content3').css('visibility', 'hidden');
$('#content4').css('visibility', 'hidden');
$('#content' + n).css('visibility', 'visible');
};
$('#op1').click( function () {
setVisibility("1");
$('.pointer').animate({
top: '16px'
});
})
$('#op2').click( function () {
setVisibility("2");
$('.pointer').animate({
top: '38px'
});
})
$('#op3').click( function () {
setVisibility("3");
$('.pointer').animate({
top: '60px'
});
})
$('#op4').click( function () {
setVisibility("4");
$('.pointer').animate({
top: '82px'
});
})
})
At line 20 of the code, I'm looking for a way to reference the 'top' attribute of the selected list item in order to synchronize the animation of the pointer div with it. However, I'm struggling to find out how to retrieve that specific attribute value.
Any suggestions or solutions are appreciated!