2 buttons to 1 toggle button ?

Good day to you all,
here is a question about making a show/hide toggle button instead of two separate button.

Here is my code :

function hide(li) {
       
  if (document.getElementById)
     document.poppedLayer = eval('document.getElementById(li)');
  else if (document.all)
     document.poppedLayer = eval('document.all[li]');
  else
     document.poppedLayer = eval('document.layers[li]');
  document.poppedLayer.style.display = "none";
}

function show(li) {
  if (document.getElementById)
     document.poppedLayer = eval('document.getElementById(li)');
  else if (document.all)
     document.poppedLayer = eval('document.all[li]');
  else
     document.poppedLayer = eval('document.layers[li]');
  document.poppedLayer.style.display = "block";
}

Code (markup):

 

<a href="javascript:collapse2.slideit()" class="menulinks4">Show/ Hide Fixtures</a>
<div id="cat" style="width: 700px; background-color: #99E0FB;">

<!--Your DIV content as follows. Note to add CSS padding or margins, do it inside a DIV within the Collapsible DIV -->
<div>

<!--Your DIV content as follows -->
<table
<tr>
<td>karthimx</td
</tr>
<!-- Positions List End -->
</table>
</div>
</div>

<script type="text/javascript">

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse2=new animatedcollapse("cat", 800, true)

</script>

 

can u please give me a working demo, please?