[jQuery] Sort of like tabs... need to start with a random div and swap it out when clicking a link

[jQuery] Sort of like tabs... need to start with a random div and swap it out when clicking a link


I think I'm pretty close to getting this to work, but it's not quite.
This is essentially tab functionality, but the initially showing div
needs to be randomly chosen.
I can either show the random div initially, but then the links don't
work. Alternatively, I can make the links work, but then I can't get
the random div. The code I'm including shows working links.
To (attempt to) show the random div, I'm using this
http://www.leftrightdesigns.com/library/jquery/randomchild/jquery.randomchild.js
The links use this: http://enure.net/dev/hide-all-except-one/
I was trying to take this part, which shows the first child div of
#toggleThis: $('#toggleThis > div:first').attr('id')
And substitute this: $('#toggleThis').randomChild() but it doesn't
work.
Can anybody weigh in and tell me where I'm going wrong? Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Random test</title>
<style type="text/css">.hide { display: none; }</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-
latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var hash = window.location.hash;
(!hash) ?
hideAllExcept('#' + $('#toggleThis > div:first').attr('id'))
: hideAllExcept(window.location.hash);
$('a.toggle').click(function() {
var href = $(this).attr('href');
hideAllExcept(href);
});
});
function hideAllExcept(el) {
$('#toggleThis div').addClass('hide');
$(el).removeClass('hide');
$('a.toggle').removeClass('active');
$('a[href="' + el + '"]').addClass('active');
}
jQuery.fn.randomChild = function(settings) {
    return this.each(function(){
        var c = $(this).children().length;
        var r = Math.ceil(Math.random() * c);
        $(this).children().hide().parent().children(':nth-child(' + r +
')').show();
    });
};
</script>
</head>
<body>
    <ul>
        <li><a href="#lorem" class="toggle">Lorem ipsum</a></li>
        <li><a href="#ut" class="toggle">Ut enim ad</a></li>
        <li><a href="#duis" class="toggle">Duis aute</a></li>
        <li><a href="#execepteur" class="toggle">Excepteur sint</a></li>
    </ul>
    <div id="toggleThis">
        <div id="lorem">Lorem ipsum dolor sit amet.</div>
        <div id="ut">Ut enim ad minim veniam.</div>
        <div id="duis">Duis aute irure dolor.</div>
        <div id="execepteur">Excepteur sint occaecat.</div>
    </div>
</body>
</html>