Replace Content with Javascript/Jquery

Question

http://jsfiddle.net/bUjx7/31

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<style type="text/css">
.fieldsgame1 {
    display:none;
}
.fieldsgame2 {
    display:none;
}
.fieldsgame3 {
    display:none;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
    $('.tablereplace a').click(function () {
        $('.fieldsmatch').fadeOut(0);
        $('.fieldsgame1').fadeOut(0);
        $('.fieldsgame2').fadeOut(0);
        $('.fieldsgame3').fadeOut(0);
        var region = $(this).attr('data-region');
        $('#' + region).fadeIn(0);
    });
});
</script>

Put this into my WordPress header. CSS is fine. HTML is fine. Javascript isn't working. Help?

Answer 1

I'm not really sure what "isn't working" (since the Fiddle you're showing is working fine), but I did manage to clean up your code a bit. It's more DRY , fadeOut with speed of 0 is the same as hide() / show() , & jQuery.data() is used to retrieve the data-region .

HTML

<div class="tablereplace">
<a data-region="fieldsmatch" href="#">Match</a>
<a data-region="fieldsgame1" href="#">Game 1</a>
<a data-region="fieldsgame2" href="#">Game 2</a>
<a data-region="fieldsgame3" href="#">Game 3</a>
<div id="fieldsmatch" class="fieldsmatch">8-0</div>
<div id="fieldsgame1" class="fieldsgame">7-1</div>
<div id="fieldsgame2" class="fieldsgame">6-2</div>
<div id="fieldsgame3" class="fieldsgame">1-0</div>
</div>

CSS

.fieldsgame {
    display:none;
}

JS

$('.tablereplace a').click(function () {

    $('#fieldsmatch, .fieldsgame').hide();
    var region = $(this).data('region');
    $('#' + region).show();

});

JSFiddle .

=== UPDATE ===

Based on your comment, I found the following difference on the live page:

<a href="#vsfield" data-region="fieldsmatch">Match</a>
<a href="#vsfield" data-region="fieldsgame1">Game 1</a>
<a href="#vsfield" data-region="fieldsgame2">Game 2</a>
<a href="#vsfield" data-region="fieldsgame3">Game 3</a>

<div class="tablereplace">
    <div class="fieldsmatch" id="fieldsmatch">8-0</div>
    <div class="fieldsgame" id="fieldsgame1">7-1</div>
    <div class="fieldsgame" id="fieldsgame2">6-2</div>
    <div class="fieldsgame" id="fieldsgame3">1-0</div>
</div>

Your specified click function is based on the .tablereplace a selector. But, on your site, there isn't any a found inside the .tablereplace . In other words, your HTML is wrong.