function showhide vil ikke virke

Her er min kode:


<style>

.title_line {
    background: #ccc;
    font: 12px Verdana, Sans-serif;
    font-weight: bold;
    height: 13px;
    width: 440px;
    padding: 2px 30px 2px 30px;
    border: 1px solid #888;
}

.btn {
    background: #fff;
    width: 10px;
    height: 10px;
    color: #000;
    text-decoration: none;
    border: 1px solid #888;
}

.btn:hover {
    background: #999;
}

.the_div1 {
    border: 1px solid #888;
    width: 440px;
    padding: 2px 30px 2px 30px;
    border-top: 0px;
}

.media_area {
    margin-bottom: 10px;
}

.title {
    float: left;
}

.buttons {
    float: right;
}

</style>

<script type="text/javascript">

function showhide(div, link) {
    var div = document.getElementById(div);
    var link = document.getElementById(link);
    if(div.style.display == "block") {
        div.style.display = "none";
        link.firstChild.nodeValue = "-";

    } else {
        div.style.display = "block";
        link.firstChild.nodeValue = "X";
    }
}

</script>


<div class="media_area">
    <div class="title_line">
        <span class='title'>TV-Kanaler</span>
        <span class='buttons'><a href="#" class="btn" id="link1" onclick="showhide(the_div, link1);">X</a></span>
    </div>

<div id="the_div" class="the_div1" style="display:block;">Indhold 1 her</div>
</div>






<div class="title_line">
<span class='title'>Dagblade</span>
<span class='buttons'><a href="#" class="btn" onclick="document.getElementById('the_div2').style.display=(document.getElementById('the_div2').style.display== 'block')?'none':'block';">X</a></span>

</div>



<div id="the_div2" class="the_div1" style="display:block;">Indhold 2 her</div>




the_div2 virker som den skal, fordi den er lavet på en lidt anden måde.. Men the_div1 virker ikke fordi jeg forsøger at kalde den som en function.. Hvorfor?