Quick question on streamlining .load() parameters

Quick question on streamlining .load() parameters

I'm using a couple of snippets to load external files into a target div. It's working great. The problem / question is "how can I reduce the code needed" . Basically I have two menus on each page, a set of tabs and a footer text based menu. Both are designed to summon the same content into the same target div in the same fashion.

Here's the code i'm using. Notice how i've had to repeat it, once for the tabs menu and once for the footer menu.

  1. <script type="text/javascript">
        $(document).ready(function() {
            $('#tabs a').click(function() {
            var toLoad = $(this).attr('href');
            $('.details').fadeOut('fast', loadContent);
            function loadContent() {
                $('#homeleft').load(toLoad,'', newContent);
            }
            function newContent() {
                $('.details').fadeIn('fast');
            }
            return false;
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#footerlink a').click(function(){
                var loadThis = $(this).attr('href');
                $('.details').fadeOut('fast', thisContent);
                function thisContent() {
                    $('#homeleft').load(loadThis,'',thisNew);
                }
                function thisNew() {
                    $('.details').fadeIn('fast');
                }
                return false;
            });
        });
    </script>




























My logical side is asking the question "how can I NOT have to repeat this function?" for both to work. So I thought of this part:

  1. $(document).ready(function() {
  2. $('#tabs #footerlink a').click(function() {
Where I show both of the a:link container ID's but that didn't work. Again, my 'logical' side says that IF I showed both of those it would run those functions equally. Hope this makes sense!