Show/Hide Div Help Needed

[addam]

Hi guys -
I need a little help. I'm semi-new to javascript and am trying to get a link, on click, to show/hide a div. I've been working off of this article: http://alistapart.com/articles/eatcake trying to make it work. I've ended upmodifying it some and here's my code:

function hideDivs()
{
if (!document.getElementsByTagName) {
return null;
}
var divs =
document.getElementsByTagName("div");
for(var i=0; i < divs.length; i++)
{
var div = divs[i];
var id = div.id;
}
}

function fixLinks()
{
if (!document.getElementsByTagName) {
return null;
}
var anchors =
document.getElementsByTagName("a");
for(var i=0; i < anchors.length; i++)
{
var a = anchors[i];
var href = a.href;
if ((href.indexOf("#") != -1) &&
(href.indexOf("content") == -1))
{
var index = href.indexOf("#") + 1;
href = "javascript:show('" +
href.substring(index) + "');";
a.setAttribute("href",href);
}
}
}

function show(what)
{
if (!document.getElementById) {
return null;
}
showWhat =
document.getElementById(what);
showWhat.style.display = "block";
hideDivs(what);
}

window.onload = function()
{
hideDivs();
fixLinks();
}

Now, on the set up side, I've got two links (buttons) that when clicked open a specified div. So my "Cats" button opens a div with id "Cats" and my "Dogs" button opens the div id "Dogs."

Here's the problem I'm running into. When "Cats" is clicked, then clicked again, the div doesn't hide.

Also when "Cats" is clicked followed by "Dogs" both divs are open. I would like it if, when "Cats" is clicked, and open, then "Dogs" is clicked, "Cats" would close and "Dogs" would open and vice versa.

Is this making sense? Is there an easy tutorial I could be steered to? Thanks for your help.