How can I optimize my javascript code?
<p>I have created the following jquery toggle box show/hide function. But I know that I have redundant code, and I want to make it as short and effective as possible. This is just my attempt to learn to code <em>right</em> fron the start...</p>

<p>HTML:</p>

<pre><code>&lt;div&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a id="areaPta"&gt;Pretoria&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a id="areaPotch"&gt;Potch&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a id="areaJhb"&gt;JHB&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
&lt;div&gt;
    &lt;div class="hidden" id="pretoriaDetail"&gt;Pretoria Content&lt;/div&gt;
    &lt;div class="hidden" id="potchDetail"&gt;Potch Content&lt;/div&gt;
    &lt;div class="hidden" id="jhbDetail"&gt;JHB Content&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.hidden{
    display: none;
}
</code></pre>

<p>JS:</p>

<pre><code>$(function() {

    var p = $('#areaPta');
    var po = $('#areaPotch');
    var j = $('#areaJhb');

    p.click(function (){
        $('.hidden').hide(500);
        $('#pretoriaDetail').show(500);
    });
    po.click(function (){
        $('.hidden').hide(500);
        $('#potchDetail').show(500);
    });
    j.click(function (){
        $('.hidden').hide(500);
        $('#jhbDetail').show(500);
    });

});
</code></pre>
