jQuery tabs with both Ajax and static div's

Question

I am posting form data to a page that is using jQuery tabs. Because you can't load post data into an Ajax query (at least without a ton of extra work and making it more insecure), I'm loading the active tab as an actual div on the page.

    <script type="text/javascript">
            $(document).ready(function() {
                        $('#tabs').tabs({ selected: 3 });
            });
</script>

<div id="tabs" style="margin-top: 10px">
            <ul>
                        <li><a href="myprofile.php">My Profile</a></li>
                        <li><a href="mycompany.php">My Company</a></li>
                        <li><a href="manageusers.php">Manage Users</a></li>
                        <li><a href="#manageallusers">Manage All Users</a></li>
                        <li><a href="manageclients.php">Manage Clients</a></li>
            </ul>


            <div id="manageallusers"></div>
</div>

In the example above, all tabs except the "Manage All Users" tab is called via the Ajax method in the jQuery tabs function. The other is just a static div already on the page. On initial load, this works beautifully. However, if you begin to click through the Ajax tabs, the static div remains beneath.

There is a 'load:' callback in the tabs() function. I know I should be using this -- I'm just not sure at all how to approach it. Any thoughts, suggestions??

Answer 1

$("#tabs").tabs(
     {
      load: function(ui)
      {
       $("#manageallusers").hide();
      }
        });

This is what you would use if you were trying to hide it. You could obviously swap it out with whatever you want to do, because you weren't very specific about it.