Javascript Toggle

[andrewtayloruk]

Hi, i'm new to Javascript and am having a bit of trouble getting a show hide function working.

I've written two seperate functions to show or hide a piece of content, the thing is the method i've used requires the use of two links to call up the functions. What i'd like to do is have an image that runs the show function when you click it and then runs hide function when clicked again. I guess i could make a third function that changes the link that calls up the functions.

Here is what i have so far...

<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'inline';
}

function hideStuff(id) {
document.getElementById(id).style.display = 'none';
}

</script>

And the link i'm using to call the showStuff function...

<a href="#packages" onclick="showStuff('package1');"><img class="image_link" src="images/arrow_down.png"></a>

I know that at the moment i'm just calling up one fuction but could somebody please give me an example of how to toggle the link to switch between functions when clicked.

Thanks

[andrewtayloruk]

Nevermind... I got it working by switching the image in the same function... Here is the code..

<script type="text/javascript">
function package1_toggle() {

if (document.getElementById('package1').style.display == 'none') {
document.getElementById('package1').style.display = 'inline';
document.getElementById('package1_img').src="images/arrow_up.png";

} else {
document.getElementById('package1').style.display = 'none';
document.getElementById('package1_img').src="images/arrow_down.png";
}

}

</script>

Then the link with the image looks like this...

<a href="javascript:package1_toggle();"><img class="image_link" src="images/arrow_down.png" id="package1_img"></a>

Hope this helps somebody.

Thanks