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 *right* fron the start...

HTML:

```
<div>
    <ul>
        <li><a id="areaPta">Pretoria</a></li>
        <li><a id="areaPotch">Potch</a></li>
        <li><a id="areaJhb">JHB</a></li>
    </ul>
</div>
<div>
    <div class="hidden" id="pretoriaDetail">Pretoria Content</div>
    <div class="hidden" id="potchDetail">Potch Content</div>
    <div class="hidden" id="jhbDetail">JHB Content</div>
</div>

```

CSS:

```
.hidden{
    display: none;
}

```

JS:

```
$(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);
    });

});

```