I have been using this JQuery script to have an opening and closing DIV. It works perfectly.(I forgot where I got it in order to give credit).

However, it is set up with the DIV being automatically open. I am trying to figure out how to have it automatically closed.

$(document).ready(function() {

    // When the expand button is clicked:
    $('.expandLeft').click(function() {
        $('.expandLeft').css("display","none");
        $('.collapseLeft').css("display","block");
        $('#menu').animate({height:"150px"},1550);
        $.cookie('menu', 'expanded');
    });
    // When the collapse button is clicked:
    $('.collapseLeft').click(function() {
        $('.collapseLeft').css("display","none");
        $('.expandLeft').css("display","block");
        $('#menu').animate({height:"1px"},1550);
        $.cookie('menu', 'collapsed');
    });


// COOKIES
    // DIV state
    var poster = $.cookie('menu');

    // Set the user's selection for the DIV
    if (poster == 'collapsed') {
        $('.collapseLeft').css("display","none");
        $('.expandLeft').css("display","block");
        $('#menu').css("height","1px");
    };

});

call the opposite function on loading the document

Well there is no call in the document. Just the js script calls. The js file just finds the Div name.

in that case, call the collapse function on page load.

Or, you could give the element an inline style of display: none and height: 1px, since all the function is doing is animating those CSS properties.

Originally Posted by wayfarer07

Or, you could give the element an inline style of display: none and height: 1px, since all the function is doing is animating those CSS properties.

This does actually work the way you are thinking, but the problem is that when you first load the page the JS is looking at the DIV as Open so the open/close function shows "close" when the Div is not even visible because of the CSS you recommended.

Originally Posted by chrishirst

in that case, call the collapse function on page load.

Chris. You are right.
I tried this,
<script type="text/javascript">
function collapseLeft()
</script>

Of course it doesn't work. What am I doing wrong here?

Originally Posted by wayfarer07

Or, you could give the element an inline style of display: none and height: 1px, since all the function is doing is animating those CSS properties.

I should have also explained before that I have an alternating text depending on the state of the div. When the div is closed the text reads "open menu" and of course when it is open then the text says "close menu".

<script type="text/javascript">
function collapseLeft()
</script>

What am I doing wrong here?

There you have (almost) defined a new function called collapseLeft()

use

<script type="text/javascript">
collapseLeft()
</script>

between the </body> & </html> elements.

Unfortunately that does not work.