Choose where tab content goes in jQuery tabs

Question

I was wondering if anyone knows how to choose where to add the content, I tried adding the option load : function() {} or added in ajaxOptions: { success : function() {...} }

<div id="container" style="display:none">
    <header class = "row">
        <div id="tabs">
            <ul>
                <li><a href="ajax/main.html">Learn@UW</a></li>
                <li><a href="ajax/content1.html">HCI 570</a></li>
                <li><a href="ajax/content2.html">Finance 300</a></li>
                <li><a href="ajax/content3-slow.php">Handball</a></li>
                <li><a href="ajax/content4-broken.php">Accounting 301</a></li>
                <li><a href="ajax/content4-broken.php">EPD 375</a></li>
                <li><a href="ajax/content4-broken.php">+</a></li>
            </ul>
        </div>
    </header>
    <div id="contentContainer">
        // Put the content here...
    </div>

Thanks a lot! Matt Mueller

Answer 1

Change contentContainer to tabs-1 and place it next to your links.

<div id="tabs">
     <ul>
        <li><a href="ajax/main.html">Learn@UW</a></li>
        <li><a href="ajax/content1.html">HCI 570</a></li>
        <li><a href="ajax/content2.html">Finance 300</a></li>
        <li><a href="ajax/content3-slow.php">Handball</a></li>
     </ul>
    <div id="tabs-1">
     // Put the content here...
    </div>
</div>

Example here : http://jqueryui.com/demos/tabs/#ajax