Problem with tabs. Load content into own div

Problem with tabs. Load content into own div


As the demo and example show, the links and content is in the same
div. As you can see here:
<script type="text/javascript">
    $(function() {
        $("#navi").tabs({ fxFade: true, fxSpeed: 'fast' });
    });
</script>
<div id="navi">
<ul>
<li><a href="#nyheter">Nyheter</a></li>
<li><a href="#arbeid">Arbeid</a></li>
</ul>
<div id="nyheter">

Nyheter her


</div>
<div id="arbeid">

Arbeid her


</div>
</div>
How can I make it to load the content inside a new div outside, in
this example, the #navi that was set in the javascript code?
Like this :
<div id="navi">
<ul>
<li><a href="#nyheter">Nyheter</a></li>
<li><a href="#arbeid">Arbeid</a></li>
</ul>
</div>
<div id="content">
<div id="nyheter">

Nyheter her


</div>
<div id="arbeid">

Arbeid her


</div>
</div>