Question

html head:

<script type="text/javascript" language="JavaScript">

    function getStyle() {
        var temp = document.getElementById("cont").style.display;
        return temp;
    }

    function switch01() {
        var current = getStyle();
        if (current == "none") {
            document.getElementById("cont").style.display = "block";
        }
        else {
            document.getElementById("cont").style.display = "none";
        }
    }​

</script>

body:

<a href="javascript:switch01('cont')">CONTENT</a>

CSS:

#cont{
    display: none;
}

After loading the page – first click doesn’t work. After the first click – everything works.
Also, How could I show/hide the div slowly (with sliding effect, not momentally) ?

Answer 1

If you want the slide effect, my recommendation is using jQuery:

$('#toggle').click(function() {
    $('#cont').slideToggle();
});​

See this DEMO.

For changing the sliding speed and more information see documentation.