Newbie: show/hide with a single click

Newbie: show/hide with a single click

Hi there,
Pretty new to JQuery, so trying out something I want to use later.

The following code is a typical show/hide combo, followed by an attempt to do the same with a single control ("singleClick").
Unfortunately, it opens the "extra" dive but won't close it.

Is it a fault in my javascript, or am I asking the jQuery to use logic incorrectly?

This is the code:
  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>CSS/Jquery show/hide example</title>
    <link href="showhide.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

    <script type="text/javascript">
       $(document).ready(function() {
            $('div.extra').hide();
            $('a').click(function(){
                $('div.extra').show('slow');
            });
            $('a#close').click(function(){
                $('div.extra').hide('slow');
            });
            $("a#singleClick").click(function() {
                if (document.getElementById(extra).style.display = 'none')    {
                    $('div.extra').hide('slow');
                } else if (document.getElementById(extra).style.display = 'block'){
                    $('div.extra').slow('slow');
                }
            });
    });
    </script>
    </head>

    <body class="body">

    <div id="outer">
    <b>This is the top text...</b><br />
    Press <a href="#" onClick="show('extra');" id="showClick">this</a> to get the additional bit
    </div>

    <div id="extra" class="extra">
        <h3>...and this is the additional text!</h3>
        <a href="#" id="close">close</a>
    </div>
    <div id="toggle">
    ...or in a <a href="#" id="singleClick">single click</a>!
    </div>


    </body>
    </html>