JQuery Script not changing visibility of div?

JQuery Script not changing visibility of div?

Basically, I would like to show #pagebox when #about is clicked. At the
minute #about is a link, I don't know if this affects anything.
The CSS code for #pagebox (#about doesn't have any)
#pagebox{
z-index:99;
background-color:white;
position:fixed;
width:700px;
margin-left:-350px;
margin-top:-300px;
top:50%;
left:50%;
height:600px;
visibility:hidden;
}
and this is the script I used (from another questions answer):
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('#about').on('click', function(){
$('#pagebox').show();
});
</script>
By the way, I don't know if this makes any difference but I'm coding on
Tumblr. Thank you all for your help.