How to start jQuery toggle collapsed?

Question

I'm trying to have a jQuery toggle be collapsed by default.

I have read some other examples, but they weren't quite the same as my setup and I couldn't really figure them out.

This is my HTML:

<table border="0" width="100%" align="center">
    <tbody>
        <tr>
            <td>
                <div style="float:right;">
<a style="font-size:10px;" href="#" id="tgloptions">Options</a>

                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="options" style="white-space: nowrap; width: 100%;">OPTIONS</div>
            </td>
        </tr>
</table>

and current script:

$('#tgloptions').click(function () {
    $('#options').toggle('fast');
    return false;
});

and jsBin

I managed to get the toggle to work fine. I just want it to not be there on page load and there once clicked.

I played around with adding:

$('#options').collapse("hide")

but couldn't manage to get that bit to work so I removed it.

Answer 1

Keep it hidden by adding the line (jsBin):

$('#options').hide();