hide/show not working after first pass through all links

I'm making a "tabbed navigation" type of page, where the "home" "about" "links" etc. pages are actually hidden spans that show when the corresponding "a img" is clicked. At that time all other pages are to hide()

The "home" page is the main splash page, so if you click "about", the "about" page will show up (hiding the "home" page or whichever one was open), and clicking "about" again will .hide() the "about" span and return to the "home" span.

The main issue is occurring either randomly, or after a full pass through each link, where instead of hiding the "home" span, it's keeping that span open, and opening the clicked span underneath the "home" span.

I can't figure out what's causing this.

HTML

<div id="container">
<div id="navigation">   <a href="#" class="homeImg">One</a>
<a href="#" class="aboutImg">Two</a>
<a href="#" class="hireImg">Three</a>
<a href="#" class="workImg">Four</a>
<a href="#" class="linksImg">Five</a>

</div>
<div id="content">
<span class="startingContent" id="navContent">
            <h1>This is the splash page</h1>
            <h2>This should dissapear when another link is clicked</h2>
            <h3>Reappear when no other links are open</h3>
</span>

<span class="aboutContent" id="navContent">
            <h1>Random Text</h1>
            <p>Random Text</p>
    </span>
<span class="hireContent" id="navContent">
            <h1>Random Text</h1>
            <p>Random Text</p>
    </span>
<span class="workContent" id="navContent">
            <h1>Random Text</h1>
            <p>Random Text</p>
    </span>
<span class="linksContent" id="navContent">
            <h1>Random Text</h1>
            <p>Random Text</p>
    </span>

    </div>
</div>

jquery

$(document).ready(function () {
$('.aboutContent, .hireContent, .workContent, .linksContent, ').hide(function () {
$('.aboutImg').click(function () {
$('.startingContent,  .hireContent, .workContent, .linksContent').hide(function   () {
            $('.aboutContent').show(function () {
                $('.aboutImg').click(function () {
                    $('.aboutContent').hide(function () {
                        $('.startingContent').show();
                    });
                });
            });
        });
    });
});
});

$(document).ready(function () {
$('.aboutContent, .hireContent, .workContent, .linksContent, ').hide(function () {
    $('.hireImg').click(function () {
 $('.startingContent, .aboutContent, .workContent, .linksContent').hide(function   () {
            $('.hireContent').show(function () {
                $('.hireImg').click(function () {
                    $('.hireContent').hide(function () {
                        $('.startingContent').show();
                    });
                });
            });
        });
    });
});
});

$(document).ready(function () {
$('.aboutContent, .hireContent, .workContent, .linksContent,').hide(function () {
    $('.workImg').click(function () {
$('.startingContent, .aboutContent, .hireContent, .linksContent').hide(function () {
            $('.workContent').show(function () {
                $('.workImg').click(function () {
                    $('.workContent').hide(function () {
                        $('.startingContent').show();
                    });
                });
            });
        });
    });
});
 });

 $(document).ready(function () {
 $('.aboutContent, .hireContent, .workContent, .linksContent,').hide(function () {
    $('.linksImg').click(function () {
 $('.startingContent, .aboutContent, .hireContent, .workContent,').hide(function () {
            $('.linksContent').show(function () {
                $('.linksImg').click(function () {
                    $('.linksContent').hide(function () {
                        $('.startingContent').show();
                    });
                });
            });
        });
    });
});
});



$(document).ready(function () {
$('.aboutContent, .hireContent, .workContent, .linksContent, ').hide(function () {
    $('.homeImg').click(function () {
   $(' .aboutContent, .hireContent, .workContent, .linksContent').hide(function () {
            $('.startingContent').show();
        });
    });
});
 });

CSS

body {
background-color: #403C29;
margin: 0, auto;
padding: 0;
color: white;
}
#container {
position:absolute;
left: 50%;
width:960px;
margin-left:-480px;
}
#navContent {
width: 960px;
height: 600px;
background-color: #403C29;
}
#navigation {
text-align: center;
}

http://jsfiddle.net/alanh13/YpXbn/2/ (the demo doesn't work for some reason, works in a browser though)

Also, you cannot have elements with the same ID. That is what classes are for. The id attribute is intentionally made for it to be unique.

Here's a refined version of what you should do: http://jsfiddle.net/TRTxB/1/

How about trying this... I'm sure you could easily apply this concept. Which is storing the ID of the div you want to show in a custom selector for a given element.

<div class="container">
    <div class="nav">
        <a content="aDiv" class="navBtn">A</a>
        <a content="bDiv" class="navBtn">B</a>
        <a content="cDiv" class="navBtn">C</a>
    </div>
</div>
<div id="aDiv" class="data">
    A div
</div>
<div id="bDiv" class="data">
    B div
</div>
<div id="cDiv" class="data">
    C div
</div>

JS:

 $(document).ready(function(){

    $('.navBtn').click(function(event){

        var contentSelector = $(this).attr('content');
        $('.data').hide();
        $("#"+contentSelector).show();
    });

});

Here's a JS Fiddle: http://jsfiddle.net/52CQA/