Question

I used this tutorial to hid/show DIVs. Unfortunately for some reason it’s no longer working (I modified a few things in my code in the meantime)… Do you see where the issue come from? jsfiddle: http://jsfiddle.net/Grek/C8B8g/
I think there’s probably a conflict btw the 2 scripts below:

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

$('.activity-title a').click(function(){
  $('.textzone').fadeOut(2000);
  var region = $(this).attr('data-region');    
  $('#' + region).fadeIn(2000);
})​

Answer 1

You have a few problems going on. You’re missing data-source on your <a> elements. Their “region-source” is hidden inside of the href with some function. I removed that put it into data-source and now it all works fine.

You want to do something like this:

$('.activity-title a').click(function(){
    var region = $(this).attr('data-region'); 
    $('.textzone:visible').fadeOut(2000, function () { 
        $('#' + region).fadeIn(2000);
    });

    return false; // stops href from happening    
})​;

// HTML Structured like so:
<div class="source-title-box"><span class="activity-title">
    <a href="#" data-region="source-region">Our region</a></span>
</div>

jsFiddle DEMO