jquery-ui sets content div to style="display:none;"

jquery-ui sets content div to style="display:none;"

I'm new to jQuery and jQuery-UI. Just did a small test homepage to play around with. When clicking on an menu item the content is loaded without a full page reload. But when I add the jQuery-ui script, the content won't show up. Without this line (when it's commented out):
  1. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
the content is loaded correctly. After clicking a menu item the content div somehow appends
  1. style="display:none;"

I'm using the jquery-ui script to pulsate the green box in test.html when clicking on it.
See http://marvinhagemeister.de/test/test.html for a demo.


This is the code so far:

test.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Test Homepage</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
       
        <style type="text/css">
            #wrapper{text-align:center;}
            #box {background:green;position:relative;left:50%;margin-left:-50px;height:100px;width:100px;}
        </style>
        <script type="text/javascript">
            $(document).ready(function(){

                // Replace content without page reload
                $('#menu a').click(function() {
                    var toLoad = $(this).attr('href')+' #content';
                    $('#content').hide('fast',function() {
                        $('#content').load(toLoad,'',function() {
                        $('#content').show('normal');
                        });
                    });
                   
                    return false;
                });
               
                // Pulsate green box
                $('#box').click(function () {
                    $(this).effect('pulsate', { times:2 }, 1000);
                });
            });
        </script>
    </head>

    <body>
        <div id="wrapper">
            <h1>Nice Site</h1>
            <div id="menu">
                <a id="link" href="test.html">Welcome</a>
                <a id="link" href="content.html">Content1</a>
            </div>
            <div id="content">
                <h2>Welcome!</h2>
                <p>Text here</p>
                <div id="box"></div>
            </div>
        </div>   
    </body>
    </html>
















































and content.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Test Homepage</title>
    </head>

    <body>
        <h2>About</h2>
        <div id="content">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        </div>
    </body>
    </html>