jQuery toggle, display animation and load url

jQuery toggle, display animation and load url

I started learning php and smarty few months ago, all is going good so
far. Now I came to the point where I need to use jQuery.
I have a list of articles which I want to load into div without reloading
the page. This is my html/smarty code:
<a class="title" id="link_{$val.id}" href="#id{$val.id}"
onclick="load('{$baseurl}/read-{$val.id}.html');return
false;">{$val.title}</a>
<div id="loadingDiv_{$val.id}" style="display:none">
<img src="{$templatepath}/images/loading.gif" />
</div>
<div id="Loaded_{$val.id}" class="full-article"> </div>
What I'm trying to do is when I click on link, I want the <div
id="loadingDiv"> to toggle down displaying my loading animation while the
page is being loaded and when it's ready I want the animation to go away
and load the content of my page into my <div id="Loaded_{$val.id}"></div>.
When my visitors finish reading chosen article, I want them to be able to
click on that link again and toggle the <div id="Loaded_{$val.id}"></div>
up.
I've been looking for hours now and can't get it to work. I tried using this
<script>
function load(url){
var target = event.target.id;
$("#Loaded_"+target).toggle();
$("#Loaded_"+target).load(url);
}
</script>
and it kinda works but there are 3 major problems with my code:
it toggles down, loads the page into div but when I click the link again
it toggles up and loads the page again so every toggle down and toggle up
adds 2 views to my article
it works in chrome but doesn't work in firefox
-- ReferenceError: event is not defined
can't get the loading animation to show
I'm not looking for complete solution, I would like to know which
functions do I need to use/combine to achieve what I want.