Using jQuery to toggle visibility of a div

First of all I must start with saying, javascript and jQuery is very different from anything I have ever used before and I have been searching high and low for a simple way to simply toggle the visibility of a div. The reason for this is that I want to ‘popup’ a insertion div when the user requests it and reason for that is because I want to learn :)

Let’s start with the html elements needed:

<a href="#" id="linkId">Link</a>

<div id="divId" runat="server" style="visibility: hidden; position: absolute;
    background-color: Aqua; border: solid 10px black; width: 400px; height: 400px;">
    <!-- Some input elements here -->
</div>

As you can see I have chosen to REALLY display the div when it’s visibility is toggled but never mind my wanna-be-a-designer-skills!!  This is where I started and I was searching forever and frankly no one had posted a solution I could make work for me. After searching for a few hours I decided to use the google hosted jqúery.js you need to add a valid reference to something that contains jQuery.js for me that was

<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" />

Now comes the tricky part, and this is where FireBugfor FireFox comes in handy.

$(document).ready(function() {
    $("a").click(function() {
        $("div").css('visibility', 'visible');
    });
});