accordion menu stops working on adding href links

Here my simple accordion :

<script type="text/javascript">
$(function()
{
    $("dt.title").click(function()
    { 
      $("div.info").slideUp("slow"); 
      $(this).next("div.info:hidden").slideDown("normal" );
    });
});
</script>

And it works fine with the this html :

<body>
<div id="wrapper">
<div id="container">

<ul id="nav">
<dt class="title"><a href="#">About</a></dt>
<dt class="title"><a href="#">Work</a></dt>
<div class="info">
<ul>
<li><a href="#">Bol</a></li>
<li><a href="#">Annie</a></li>
<li><a href="#">Imran</a></li>
</ul>
</div>
<dt class="title"><a href="#">Contact</a></dt>
<dt class="title"><a href="#">Links</a></dt>
</ul>
</div>
<div id="content">
</div>
</div>
</body>
</html>

When I put the href links, the menu stops working. For example :

<dt class="title"><a href="about.html">About</a></dt>

Also tell me how can I add the active and hover state in the menu.

Solution

You forgot to return false

<script type="text/javascript">
$(function()
{
    $("dt.title").click(function(){ 
        $("div.info").slideUp("slow"); 
        $(this).next("div.info:hidden").slideDown("normal" );
        return false; //do it here
    });
});
</script>
<body>
    <div id="wrapper">
        <div id="container">

            <ul id="nav">
                <dt class="title"><a href="#">About</a></dt>
                <dt class="title"><a href="about.html">Work</a></dt>
                <div class="info">
                    <ul>
                    <li><a href="#">Bol</a></li>
                    <li><a href="#">Annie</a></li>
                    <li><a href="#">Imran</a></li>
                    </ul>
                </div>
                <dt class="title"><a href="#">Contact</a></dt>
                <dt class="title"><a href="#">Links</a></dt>
            </ul>
        </div>
        <div id="content">
        </div>
    </div>
</body>

If you are planning to load the content of about.html in content element then use load method. Your function will be something like

    $("dt.title").click(function(){ 
        $("div.info").slideToggle("slow");
        $('#content').load($(this).find('a').attr('href'));
        return false;
    });

But this will not work for cross-domain url.

[UPDATE]

<script type="text/javascript">

//no use for this var
var loader = $("<div></div>").html('Loading')

$(document).ready(function() {

    $(".title").click(function(){ 

        $(this).find("ul").slideToggle("slow");

        //do all the animations here
        //but using $.get, you will get more animation effect
        //I guess

        $('#content').load($(this).find('a').attr('href'));

        return false;
    });

    //similarly for inner link
    $(".title ul a").click(
        function ()
        {   
            $('#content').load($(this).attr('href'));

            return false;
    }); 

});

</script>
<body>
<div id="wrapper">
    <div id="container">

    <ul id="nav">   
    <dt class="title"><a href="test.php">About</a>
        <ul>
                <li><a href="test.php">Bol</a></li>
                <li><a href="test.php">Annie Khalid</a></li>
                <li><a href="test.php">Imran</a></li>
        </ul>
    </dt>

    <dt class="title"><a href="test.php">Work</a>
        <ul>
                <li><a href="test.php">Bol</a></li>
                <li><a href="test.php">Annie Khalid</a></li>
                <li><a href="test.php">Imran</a></li>
        </ul>
    </dt>

    <dt class="title"><a href="test.php">Contact</a>
        <ul>
                <li><a href="test.php">Bol</a></li>
                <li><a href="test.php">Annie Khalid</a></li>
                <li><a href="test.php">Imran</a></li>
        </ul>

    </dt>    

    <dt class="title"><a href="test.php">Links</a>
        <ul>
                <li><a href="test.php">Bol</a></li>
                <li><a href="test.php">Annie Khalid</a></li>
                <li><a href="test.php">Imran</a></li>
        </ul>

    </dt>
    </ul>    

    </div>

    <div id="content">      
    <p>Welcome to my site!!!!!!!!!!!!!!!!!!!!!!!</p>

    <p>In this tutorial we will be taking your average everyday website and enhancing it with jQuery.
     We will be adding ajax functionality so that the content loads into the relevant container instead
      of the user having to navigate to another page. We will also be integrating some awesome effects...
    </p>
    </div>

</div>
</body>