slideUp() 和 slideDown() 不起作用，但 slideToggle() 起作用

Question

In this JS Fiddle,

http://jsfiddle.net/bGKLn/

I wanted to slide "content" up and down when "bottom" is hovered. I can't get it to work, please help me out.

I tried slideToggle() and it worked but..out of curiosity.. why doesn't this work?

HTML

<div id="content">Content</div>
<div id="bottom" onclick="togle()"></div>

CSS

#content {
width: 400px;
border-left: 10px solid #FA802F;
border-right: 10px solid #FA802F;
text-align: center;
padding: 100px 0px 100px 0px;
display: none;
}
#bottom {
width: 420px;
height: 100px;
background-color: #FA602F;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}

Java script

function togle() {
var x = document.getElementById("content");

if (x.style.display.value.match("none")) {
    $("#content").slideDown("slow");
} else {
    $("#content").slideUp("slow");
}
}

Answer 1

Replace

x.style.display.value.match("none")

with something like

x.style.display != "block"

as x.style.display returns a string, which has no value property, and you'll get

function togle() {
    var x = document.getElementById("content");

    if (x.style.display != "block") {
        $("#content").slideDown("slow");
    } else {
        $("#content").slideUp("slow");
    }
}

FIDDLE

or a little more jQuery'ish

$('#content').is(':visible')

FIDDLE

or a lot more jQuery'ish, just use slideToggle() ?