Javascript Show Hide - Changing toggle action from Checkbox to <a href> links
<p>currently I have a method of showing / hiding a div based on a form checkbox field as per below. What I do want however is to not use a form to show hide rather just call the show / hide function based on a simple  on a link . I hope this makes sense what I am attempting to do. Any help /advice would be really valued!</p>

<pre><code>&lt;!-- Show hide--&gt;
&lt;script language="JavaScript"&gt;
function showhidefield()
{
if (document.goform.areas.checked)
{
document.getElementById("areaone").style.display = "block";
document.getElementById("areatwo").style.display = "none";
}
else
{
document.getElementById("areaone").style.display = "none";
document.getElementById("areatwo").style.display = "block";

}
}
&lt;/script&gt;

&lt;form name="goform" id="goform" action="xxxx" method="post" enctype="multipart/form-data"&gt;

&lt;label&gt;&lt;input name="areas" type="checkbox" onclick="showhidefield()" value="1"&gt; Yes &lt;/label&gt;

&lt;/form&gt;

&lt;div id="areaone" style="display:none;"&gt;
Area One
&lt;/div&gt;&lt;!-- / Hideable area --&gt;


&lt;div id="areatwo" style="display:block;"&gt;
Area two
&lt;/div&gt;
</code></pre>

<p>Changing the above so that rather than using a form checkbox to showhide, have a toggle effect based on event e.g.</p>

<pre><code>&lt;a href="xxx"&gt;Show Areaone / Hide Areatwo&lt;/a&gt;

&lt;a href="xxx"&gt;Show Areatwo / Hide Areaone&lt;/a&gt;
</code></pre>
