Using jquery to conditionally display spans causes them to redisplay at wrong positions

Question

The code is :

$("#radioGroup").click(function()  {
    $("#groupSpan").css("display", "block");
    $("#advisorSpan").css("display", "none");
});

and for second button of radio group:

$("#radioAdvisor").click(function()  { 
  $("#groupSpan").css("display", "none");
  $("#advisorSpan").css("display", "block");
});

this works fine, well almost. If you scroll between clicking radio buttons, the span is displayed in the inccorect position - basically where it shoudl have been before scroll - looks well strange jsut appears over completely unrelated elements.

Please help?

Answer 1

$("#radioGroup").click(function()  {
    $("#groupSpan").css("display", "inline");
    $("#advisorSpan").css("display", "none");
});

$("#radioAdvisor").click(function()  { 
  $("#groupSpan").css("display", "none");
  $("#advisorSpan").css("display", "inline");
});

Answer 2

I would suggest using the shortcut methods. They usually display better.

$("#radioGroup").click(function()  {
    $("#groupSpan").show();
    $("#advisorSpan").hide();
});

$("#radioAdvisor").click(function()  { 
  $("#groupSpan").hide();
  $("#advisorSpan").show();
});