Hide/show Divs - Change Current Effect To Fade

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 somethin

Solution 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.

Solution 2:

You can use fadeIn and fadeOut methods, you can also minify the code, try the following:

functionshowonlyone(thechosenone) {
     $('.textzone').fadeOut();
     $('#'+thechosenone).fadeIn();
}

---

As you are using jQuery you can use the jQuery click handler:

HTML:

<divclass="source-title-box"><spanclass="activity-title"><ahref="#source-region">Our region</a></span></div><divclass="source-title-box"><spanclass="activity-title"><ahref="#source-oursource">Our source</a></span></div>

jQuery:

$('.activity-title a').click(function(e){
    e.preventDefault()
     var thechosenone = $(this).attr('href');
    $('.textzone').fadeOut(600, function(){
         $(thechosenone).fadeIn(600);
    });   
})

DEMO