Javascript HELP!!!

<div onclick="document.getElementById('below').style.display = 'block'; ">
<a href="javascript: void(0)">This is some text. Click here to show more text.</a>
</div>

<div id="below" style="display:none; ">
This is some more text. You cannot see it on page load, click the text above to display it.
</div>

Code (markup):

Is there a way when i press the 'this is some...' text; and when i press it again it retreats to its original state?

 

<script type="text/javascript">
function toggleBlock(id) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
}
</script>
<div>
<a href="javascript:void(0)" onClick="toggleBlock('below');">This is some text. Click here to show more text.</a>
</div>

<div id="below" style="display:none; ">
This is some more text. You cannot see it on page load, click the text above to display it.
</div>

Code (markup):

 

or better?

<script type="text/javascript">
function toggleBlock(id, linkid) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
document.getElementById(linkid).innerHTML = 'HIDE TEXT'
} else {
document.getElementById(id).style.display = 'none';
document.getElementById(linkid).innerHTML = 'Click here to show more text.'
}
}
</script>
<div>
This is some text. <a href="javascript:void(0)" onClick="toggleBlock('below', 'linkid');" id="linkid">Click here to show more text.</a>
</div>

<div id="below" style="display:none; ">
This is some more text. You cannot see it on page load, click the text above to display it.
</div>

Code (markup):

 

Thanks!!!!!!!!!!!!!!!