Question

I’m currently using the code below found on web tutorial to show/hide DIVs. It works great but don’t like the effect. Would like the DIVs to fade in / fade out instead (or something smoother, for the moment the DIVs are growing from the top-right corner). How could I adapt the code to do this? Youc ans ee it here http://jsfiddle.net/Grek/w4HWn/1/ Many thanks

function showonlyone(thechosenone) {
     $('.textzone').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(2000);
          }
          else {
               $(this).hide(2000);
          }
     });
}

Answer 1

Just change .hide() to .fadeOut() and .show() to .fadeIn()

But looking at your example, you could do it much simpler by using data attributes.

Have a look at this example.

You may need absolute positioning or some other technique because the two divs stack up while fading in and out.