jQuery - onLoad random div
<p>I have a set of divs with text &amp; info in them and I want one of them loaded and the rest hidden and then a different/random one loaded on browser refresh/onLoad.</p>

<p>Here is what I have been playing with:</p>

<p>CSS:</p>

<pre><code>#homeProfiles { width:300px; height:100px; border:solid 1px red; }​
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div id="homeProfiles"&gt;
    &lt;div&gt;Profile One&lt;/div&gt;
    &lt;div&gt;Profile Two&lt;/div&gt;
    &lt;div&gt;Profile Three&lt;/div&gt;
    &lt;div&gt;Profile Four&lt;/div&gt;
&lt;/div&gt;
​
</code></pre>

<p>Javascript:</p>

<pre><code>this.randomtip = function(){
    var length = $("#homeProfiles li").length;
    var ran = Math.floor(Math.random()*length) + 1;
    $("#homeProfiles li:nth-child(" + ran + ")").show();
};

$(document).ready(function(){    
    randomtip();
});
</code></pre>

<p><a href="http://jsfiddle.net/webmonkeycch/bSQQU/" rel="nofollow">http://jsfiddle.net/webmonkeycch/bSQQU/</a> keeling in mind im learning how to use jQuery as well as jsFiddle</p>

<p>Could the code possibly be generic so it doesn't matter how many divs I add/remove and also If you feel like getting creative a fade in effect.</p>
